0
点赞
收藏
分享

微信扫一扫

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


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

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

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

首先是 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": "邪马台国女王中弥呼向魏明帝朝贡,得「亲魏倭王」之印与铜镜"
    }
  ]
}

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

举报

相关推荐

0 条评论