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

效果图：

实现思路：

• 实现单个列表的显示和隐藏应该使用唯一元素让程序知道你应该显示和隐藏哪个列表项，可以用数据的id；
• css中定义一个hidden{display：none}控制显示和隐藏，然后通过三元运算符来判断；
• wxml定义一个点击事件来动态修改这个列表项的变量值。

功能实现：

好了，思路有了，就开始按照思路来用代码验证。果不其然，使用代码实现之后，发现自己的思路还是没错的。此功能点也可以应用到其它类似的列表的显示和隐藏中。

示例代码：

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

转载于：https://www.jb51.net/article/145112.htm

二：

微信小程序
wxml代码

<view class='list'>
  <block   wx:for='{{dataList}}' wx:key='list' wx:for-item="item">
  <view   class="list_item">
      <navigator  url='{{item.goods_id}}' bindtap="navigateToPage"  data-name='{{item.goods_title}}' id='{{item.goods_id}}' data-showType='{{item.showType}}'>
      <view class='img'>
        <image src="{{item.goods_img}}"  mode="scaleToFill"/>
      </view>
      <view  class='info'>
        <view class='title'>{{item.goods_title}}</view>
        <view class='score'>评分：{{item.goods_score}}</view>
        <view class='actor'>导演：{{item.goods_director}}</view>
        <view class="actor">主演：{{item.goods_actor}}</view>
        <view class="price">价格：￥{{item.goods_price}}</view>
      </view>
       </navigator>
      <view class='clear'></view>
  </view>
  </block>
</view>

其中 wx:for='{{dataList}}'是要显示的js中的数组名，wx:for-item="item"是下面{{item.goods_title}}要加的前缀，bindtap="navigateToPage"是绑定的触发事件名

JS代码

Page({
 
  /**
   * 页面的初始数据
   */

  data: {
    dataList:[
      {
        goods_id:1,
        goods_title:'你好，李焕英',
        goods_img:'../img/movie1.png',
        goods_score:'9.5',
        goods_director:'贾玲',
        goods_actor:'贾玲，张小斐，沈腾...',
        goods_price:100
      },{
        goods_id:2,
        goods_title:'人潮汹涌',
        goods_img:'../img/movie2.png',
        goods_score:'9.1',
        goods_director:'饶晓志',
        goods_actor:'刘德华，肖央，万茜...'    ,
        goods_price:100
      }, {
        goods_id:3,
        goods_title:'唐人街探案3',
        goods_img:'../img/movie3.png',
        goods_score:'8.8',
        goods_director:'陈思诚',
        goods_actor:'王宝强，李昊然，妻夫木聪...'
        ,
        goods_price:100
      }, {
        goods_id:4,
        goods_title:'刺杀小说家',
        goods_img:'../img/movie4.png',
        goods_score:'8.6',
        goods_director:'路阳',
        goods_actor:'雷佳音，杨幂，董子健...',
        goods_price:100
      }, {
        goods_id:5,
        goods_title:'封神榜：哪吒重生',
        goods_img:'../img/movie5.png',
        goods_score:'8.7',
        goods_director:'赵霁',
        goods_actor:'杨天翔，张赫，宣晓鸣...',
        goods_price:100
      }
    ],
  },
onLoad(){
  // 事件处理函数
  navigateToPage:function(e) {//e是获取到的点击数据
  console.log(e.currentTarget.id)
  console.log(e.currentTarget.dataset.name);
  for(var index in this.data.dataList){//循环遍历数组，   if(e.currentTarget.id==this.data.dataList[index]. goods_id){//如果点击的下标与电影id对应
      wx.setStorageSync('movie', this.data.dataList[index])//则将该电影数组以键值对方式存入缓存
      console.log(this.data.dataList[index])
     }
    }
  }
})

效果展示：