宝哥软件园

显示和隐藏微信小程序列表功能(带源代码)

编辑:宝哥软件园 来源:互联网 时间:2021-12-10

今天,项目出现了一个问题。之前单个列表的显示和隐藏是在项目首页实现的,可以通过wx:if判断来实现。现在,如何实现多列表的单一显示和隐藏功能?如果也用wx:if实现,会出现点击一个列表项,同时显示和隐藏多个列表的情况,显然不适合功能需求。然后,在简单地检查信息后,找不到类似的功能。最后想了想,思路才慢慢理清。

渲染:

微信小程序之多列表的显示和隐藏功能(附源码)(图1)

展示和隐藏。可交换的图像格式

实施思路:

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

好了,有了想法,我们就按照想法开始用代码验证。果然,用代码实现后,发现自己的思路是对的。这个功能点也可以应用于其他类似列表的显示和隐藏。

示例代码:

更多资讯
游戏推荐
更多+