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

 
 
 
  
  
  
  
  日期：
   {{item.useDate}}
  
  车型：
   {{item.cx}}
  
  时长：
   {{item.time}}
  
  费用：
   {{item.feiyong}}
  
  
  
  启用时间：2018.01.01 11:33
  结束时间：2018.01.01 11:33
  租赁地区：舟山市桃花岛景区海湾浪琴
  意见反馈
  
 
 

// 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
  })
 } 
 }
})