這篇文章將為大家詳細(xì)講解有關(guān)微信小程序中如何實(shí)現(xiàn)多列表的顯示和隱藏功能，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

為章丘等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及章丘網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、章丘網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

效果圖：

實(shí)現(xiàn)思路：

• 實(shí)現(xiàn)單個(gè)列表的顯示和隱藏應(yīng)該使用唯一元素讓程序知道你應(yīng)該顯示和隱藏哪個(gè)列表項(xiàng)，可以用數(shù)據(jù)的id；

• css中定義一個(gè)hidden{display：none}控制顯示和隱藏，然后通過三元運(yùn)算符來判斷；

• wxml定義一個(gè)點(diǎn)擊事件來動態(tài)修改這個(gè)列表項(xiàng)的變量值。

功能實(shí)現(xiàn)：

好了，思路有了，就開始按照思路來用代碼驗(yàn)證。果不其然，使用代碼實(shí)現(xiàn)之后，發(fā)現(xiàn)自己的思路還是沒錯(cuò)的。此功能點(diǎn)也可以應(yīng)用到其它類似的列表的顯示和隱藏中。

示例代碼：

<!--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>時(shí)長：
   <text class='c-green'>{{item.time}}</text>
  </view>
  <view>費(fèi)用：
   <text class='c-green'>{{item.feiyong}}</text>
  </view>
  </view>
  <view class='down clearfix {{uhide==item.id?"":"hidden"}}'>
  <view class='ml30'>啟用時(shí)間：2018.01.01 11:33</view>
  <view class='ml30'>結(jié)束時(shí)間：2018.01.01 11:33</view>
  <view class='ml30'>租賃地區(qū)：舟山市桃花島景區(qū)海灣浪琴</view>
  <view class='feedBack'>意見反饋</view>
  </view>
 </view>
 </block>
</view>
// pages/myOrder/myOrder.js
Page({
 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {
 uhide: 0
 },
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
 */
 onLoad: function (options) {
 var that = this;
 var data = {
  "datas": [
  {
   "id": 1,
   "imgurl": "../../images/car.png",
   "useDate": "2017-12-22",
   "cx": "奇瑞EQ1",
   "time": "1小時(shí)",
   "feiyong": "20元"
  },
  {
   "id": 2,
   "imgurl": "../../images/car.png",
   "useDate": "2017-12-22",
   "cx": "奇瑞EQ1",
   "time": "1小時(shí)",
   "feiyong": "20元"
  },
  {
   "id": 3,
   "imgurl": "../../images/car.png",
   "useDate": "2017-12-22",
   "cx": "奇瑞EQ1",
   "time": "1小時(shí)",
   "feiyong": "20元"
  },
  {
   "id": 4,
   "imgurl": "../../images/car.png",
   "useDate": "2017-12-22",
   "cx": "奇瑞EQ1",
   "time": "1小時(shí)",
   "feiyong": "20元"
  }
  ]
 };
 //console.log(data.datas);
 //設(shè)置車輛展示信息
 that.setData({
  carInfoData: data.datas
 })
 },
 //點(diǎn)擊切換隱藏和顯示
 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
  })
 } 
 }
})

關(guān)于“微信小程序中如何實(shí)現(xiàn)多列表的顯示和隱藏功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

網(wǎng)站標(biāo)題：微信小程序中如何實(shí)現(xiàn)多列表的顯示和隱藏功能
文章出自：http://jinyejixie.com/article44/gggjee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、企業(yè)建站、自適應(yīng)網(wǎng)站、網(wǎng)站內(nèi)鏈、云服務(wù)器、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)