今天在項目碰到一個問題,之前在項目首頁實現單列表的顯示和隱藏,通過wx:if判斷就可實現,現在要實現多列表的單項顯示和隱藏功能應該如何實現呢?如果還用wx:if實現的話會出現點擊一個列表項,多個列表同時顯示和隱藏,明顯不適合功能需求,然后簡單地查了資料也沒發現有類似的功能,最后思考一番后,慢慢地理清了思路...
效果圖:
實現思路:
功能實現:
好了,思路有了,就開始按照思路來用代碼驗證。果不其然,使用代碼實現之后,發現自己的思路還是沒錯的。此功能點也可以應用到其它類似的列表的顯示和隱藏中。
示例代碼:
<!--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.jsPage({ /** * 頁面的初始數據 */ 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 }) } }})
總結
以上所述是小編給大家介紹的微信小程序之多列表的顯示和隱藏功能【附源碼】,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對VEVB武林網網站的支持!
新聞熱點
疑難解答