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

作者刚接触小程序开发不久，打算用 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": "邪马台国女王中弥呼向魏明帝朝贡，得「亲魏倭王」之印与铜镜"
    }
  ]
}

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