今天在項目碰到一個問題,之前在項目首頁實現(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):
好了,思路有了,就開始按照思路來用代碼驗證。果不其然,使用代碼實現(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 }) } }})
總結(jié)
以上所述是小編給大家介紹的微信小程序之多列表的顯示和隱藏功能【附源碼】,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對VEVB武林網(wǎng)網(wǎng)站的支持!
新聞熱點
疑難解答