微信小程序之多列表的顯示和隱藏功能（附源碼）

今天在項目碰到一個問題，之前在項目首頁實現單列表的顯示和隱藏，通過wx:if判斷就可實現，現在要實現多列表的單項顯示和隱藏功能應該如何實現呢？如果還用wx:if實現的話會出現點擊一個列表項，多個列表同時顯示和隱藏，明顯不適合功能需求，然后簡單地查了資料也沒發現有類似的功能，最后思考一番后，慢慢地理清了思路...

效果圖：

實現思路：

• 實現單個列表的顯示和隱藏應該使用唯一元素讓程序知道你應該顯示和隱藏哪個列表項，可以用數據的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
      })
    } 
  }
})

GitHub源碼地址：小程序顯示和隱藏