微信小程序列表显示隐藏功能[带源代码]

今天，项目出现了一个问题。以前，单个列表的显示和隐藏可以通过wx:if判断实现。现在，如何实现多列表的单一显示和隐藏功能？如果还是用wx:if，会点击一个列表项，同时显示和隐藏多个列表，显然不适合功能需求。然后你简单地检查数据，没有发现类似的函数。想一想，你会慢慢明白其中的想法。

渲染：

实施思路：

要显示和隐藏单个列表，应该使用唯一的元素让程序知道应该显示和隐藏哪个列表项，并且可以使用数据的ID；css中定义了一个隐藏的{display: none}来控制显示和隐藏，然后用三元运算符来判断；Wxml定义了一个click事件来动态修改这个列表项的变量值。功能实现：

好了，当你有了思路，就可以按照思路开始使用代码验证了。果然，用代码实现后，我发现我的思路是正确的。这个功能点也可以应用于其他类似列表的显示和隐藏。

示例代码：

！-pages/myOrder/myOrder . wxml-view class=' container '！-order list-blockwx : for-items=' { { carinfodata } } ' view class=' cardb-shadow ' bind tap=' toggle BTN ' id=' { { item。id}}视图类=' nearcard-fl '图像src=' {{item。im gur } } '/image/view view class=' near card-fr '查看日期：text class=' c-green ' { item。usedate}}/text/视图视图模型：text class=' c-green ' { item . CX } }/text/view view持续时间：text class=' c-green ' { item . time } }/text/视图成本：text class=' c-green ' { item。费勇} }/text/view view class=' downllearfix { { uhide==item。身份证？ ' hidden ' } } ' View class=' ml30 '激活时间：2018 . 01 . 11336033/View View View class=' ml30 '结束时间：2018 . 01 . 01 11336033/View View View class=' ml30 '租赁区域View View class=' Feeducation ' feedBack/View/block/View//pages/myorder/myorder . jspage({/* * * page的初始数据*/data:vardata={ ' data ' :[{ ' id ' : 1，' imgur' : './images/car.png '，'使用日期' :' 2017-12-22 '，' CX' : '费勇' :' 20元' }，{'id' : 2，' imgur' : '././images/car.png '，'使用日期' 3360' 2017-12-22 '，' CX' 33366费勇' : '20元' }，{'id' : 3，' imgur' : './/images/car.png '，'使用日期' :' 2017-12-22 '，' CX' 33366费勇' :' 20元' }，{'id' : 4，' imgur' : './/images/car.png '，'使用日期' :' 2017-12-22 '，' CX ' 33366//console . log(data . datas)；//设置车辆显示信息that . setdata({ carinfodat : data . data })}，//点击切换隐藏和显示切换btn3360功能(事件){ var that=thisvar toggleBtnVal=the . data . uhide；var ItemID=event . CurrentTarget . id；If (togglebtnval==itemid) {that。setdata({ uhi de 33600 })} else { that。setdata({ uhi de 3360 itemid })} })github源代码地址：applet显示和隐藏

摘要

以上是边肖介绍的微信小程序列表显示隐藏功能[带源代码]。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！