微信小程序多列表的显示和隐藏功能 微信小程序之多列表的显示和隐藏功能【附源码】

<!--pages/myOrder/myOrder.wxml-->
<view class='container'>
 <!-- 订单列表 -->
 <block wx:for-items="{{carInfoData}}">
 <view class='card b-shadow' bindtap='toggleBtn' id="{{item.id}}">
  <view class='nearCard-fl'>
  <image src='{{item.imgurl}}'></image>
  </view>
  <view class='nearCard-fr'>
  <view>日期：
   <text class='c-green'>{{item.useDate}}</text>
  </view>
  <view>车型：
   <text class='c-green'>{{item.cx}}</text>
  </view>
  <view>时长：
   <text class='c-green'>{{item.time}}</text>
  </view>
  <view>费用：
   <text class='c-green'>{{item.feiyong}}</text>
  </view>
  </view>
  <view class='down clearfix {{uhide==item.id?"":"hidden"}}'>
  <view class='ml30'>启用时间：2018.01.01 11:33</view>
  <view class='ml30'>结束时间：2018.01.01 11:33</view>
  <view class='ml30'>租赁地区：舟山市桃花岛景区海湾浪琴</view>
  <view class='feedBack'>意见反馈</view>
  </view>
 </view>
 </block>
</view>
// pages/myOrder/myOrder.js
Page({
 /**
 * 页面的初始数据
 */
 data: {
 uhide: 0
 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 var that = this;
 var data = {
  "datas": [
  {
   "id": 1,
   "imgurl": "../../images/car.png",
   "useDate": "2017-12-22",
   "cx": "奇瑞EQ1",
   "time": "1小时",
   "feiyong": "20元"
  },
  {
   "id": 2,
   "imgurl": "../../images/car.png",
   "useDate": "2017-12-22",
   "cx": "奇瑞EQ1",
   "time": "1小时",
   "feiyong": "20元"
  },
  {
   "id": 3,
   "imgurl": "../../images/car.png",
   "useDate": "2017-12-22",
   "cx": "奇瑞EQ1",
   "time": "1小时",
   "feiyong": "20元"
  },
  {
   "id": 4,
   "imgurl": "../../images/car.png",
   "useDate": "2017-12-22",
   "cx": "奇瑞EQ1",
   "time": "1小时",
   "feiyong": "20元"
  }
  ]
 };
 //console.log(data.datas);
 //设置车辆展示信息
 that.setData({
  carInfoData: data.datas
 })
 },
 //点击切换隐藏和显示
 toggleBtn: function (event) { 
 var that = this;
 var toggleBtnVal = that.data.uhide;
 var itemId = event.currentTarget.id; 
 if (toggleBtnVal == itemId) {
  that.setData({
  uhide: 0
  })
 } else {
  that.setData({
  uhide: itemId
  })
 } 
 }
})