【小程序】如何实现一个可折叠的列表

如何实现一个可折叠的列表"/>

【小程序】如何实现一个可折叠的列表

作者刚接触小程序开发不久，打算用 CSDN 把学习过程中遇到的一些问题记录下来，都是一些浅显易懂的内容，希望对你也有所帮助。

如文章标题所示，作者要实现一个可折叠的列表，先来看一下页面效果：

这种展示方式的实现非常简单，话不多话，直接上代码。

首先是 WXML：

<view class="wrapper"><bloc wx:for="{{periods}}" wx:key="index" wx:for-index="idx" wx:for-item="item"><view class="period"><view class="title  {{idx % 2 == 0 ? 'even' : 'odd'}}" bindtap="onExpand" data-index="{{idx}}"><text>{{item.title}}</text><image class="arrow {{item.active ? 'active' : ''}}" src="../../icons/arrow-down.svg" /></view><bloc wx:if="{{item.active}}"><view class="events"><bloc wx:for="{{item.events}}" wx:for-index="idx" wx:for-item="event"><view class="item"><view><text class="year">{{event.year}}</text>, {{event.name}}</view></view></bloc></view></bloc></view></bloc>
</view>

这里稍微解释一下：

以上代码用到了一个 for 循环，作用对象是一个数组 periods，它的元素 item 包含三个字段：

• title，在示例图中用黑体字展示的部分
• events，展开后要显示的内容
• active，布尔型，用于控制是否展开

所以，我们只需要用 JS/TS 给 active 赋值就可以控制列表的展开和关闭：

  onExpand(event: WechatMiniprogram.TouchEvent) {const idx = event.currentTarget.dataset['index'];const periods = this.data.periods;const isActive = periods[idx].active;periods[idx].active = !isActive;this.setData({periods: periods,});},

代码也非常简单，就不用解释了。

其实，periods 数组的元素 item 本身没有 active 字段，我们是在运行时给它添加上的，这也是 JavaScript 的神奇之处。

{"title": "弥生时代","events": [{"year": 57,"name": "倭奴国王遣使向东汉光武帝进贡，得到「汉倭奴国王印」"},{"year": 239,"name": "邪马台国女王中弥呼向魏明帝朝贡，得「亲魏倭王」之印与铜镜"}]
}

总之，这个功能非常简单，如果上面的文字还没有说清楚的话，可以扫码体验一下：