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

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

渲染：

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

实施思路：

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

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

示例代码：