麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 課堂 > 小程序 > 正文

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

2020-03-21 16:12:23
字體:
供稿:網(wǎng)友

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

效果圖:

微信小程序,多列表,源碼

實現(xiàn)思路:

  • 實現(xiàn)單個列表的顯示和隱藏應(yīng)該使用唯一元素讓程序知道你應(yīng)該顯示和隱藏哪個列表項,可以用數(shù)據(jù)的id;
  • css中定義一個hidden{display:none}控制顯示和隱藏,然后通過三元運算符來判斷;
  • wxml定義一個點擊事件來動態(tài)修改這個列表項的變量值。

功能實現(xiàn):

好了,思路有了,就開始按照思路來用代碼驗證。果不其然,使用代碼實現(xiàn)之后,發(fā)現(xià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>時長:   <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'>結(jié)束時間:2018.01.01 11:33</view>  <view class='ml30'>租賃地區(qū):舟山市桃花島景區(qū)海灣浪琴</view>  <view class='feedBack'>意見反饋</view>  </view> </view> </block></view>// pages/myOrder/myOrder.jsPage({ /** * 頁面的初始數(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小時",   "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); //設(shè)置車輛展示信息 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源碼地址:小程序顯示和隱藏

總結(jié)

以上所述是小編給大家介紹的微信小程序之多列表的顯示和隱藏功能【附源碼】,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對VEVB武林網(wǎng)網(wǎng)站的支持!


發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 国产69久久精品成人看 | 舌头伸进添的我好爽高潮网站 | 一级大片久久 | 国产午夜精品一区二区三区免费 | 色视频在线观看 | 亚洲天堂午夜 | 亚洲综合中文 | 性欧美xxxx免费岛国不卡电影 | 国产1区在线观看 | 久久人人爽人人爽人人片av高清 | 五月激情久久 | 中文字幕在线一 | 中国免费一级毛片 | 欧美18—19sex性hd | 久久精品国产亚洲7777 | 性欧美极品xxxx欧美一区二区 | 美女性感毛片 | 日日草夜夜| 一区二区久久久久草草 | 天天透天天狠天天爱综合97 | 欧美一级性 | 亚洲黑人在线观看 | 曰韩一二三区 | 国产一级免费在线视频 | www.成人在线 | 羞羞网站在线观看入口免费 | 午夜影视一区二区 | 成人毛片免费看 | 蜜桃传媒视频麻豆第一区免费观看 | 精品亚洲视频在线 | 黄视频网址| 亚洲免费视频大全 | 国产精品久久久久久久av | 97久久曰曰久久久 | 日本特级a一片免费观看 | 精品国产一区二区三区四区阿崩 | 亚洲男人的天堂在线视频 | 免费看日产一区二区三区 | 韩国十九禁高潮床戏在线观看 | 精品国产高清一区二区三区 | 久久久久久久久久久一区 |