微信小程序-给列表加上手风琴效果

列表内容的显示和隐藏是十分常见的需求，下面我将介绍如何通过简单的CSS过渡动画来制作列表显隐的手风琴效果~

先看效果图：

关键点：要实现动画的效果，通过 display:none 控制显隐是不行的，因为这个属性造成的变化效果是瞬间的，所以这里用到的是 transition 属性来指定 heigth 高度变化的过渡效果。

需要用到的示例数据

data: {
    selected: [false, false, false, ...], // 这里表示列表项是否展开，默认初始时此数组的元素全为fasle，表示都没展开
    active: null， // 当前展开的项的index值
    examTime: [
        {
            考试日期: "2019-05-07",
            考试时间: "13:00-14:30"
            课程名称: "敏捷迭代开发",
            考试座位: "A201"，
            ...
        },
        {
            考试日期: "2019-05-07",
            考试时间: "13:00-14:30"
            课程名称: "敏捷迭代开发",
            考试座位: "A201"，
            ...
        },
        {
            考试日期: "2019-05-07",
            考试时间: "13:00-14:30"
            课程名称: "敏捷迭代开发",
            考试座位: "A201"，
            ...
        }
        ...
    ],
  }

XML布局

<view class="page">
  <view class="exams">
    <view
      class="exam"
      wx:for="{{examTime}}"
      wx:key="{{index}}"
      >
        <view
          class="exam-header"
          data-index="{{index}}"
          bind:tap="show"
          >
            <view>{{item["考试日期"]}}</view>
            <view>{{item["课程名称"]}}</view>
        </view>
        
        <!-- 下面是列表需要显示或隐藏的内容 -->
        <view class="exam-body {{selected[index] ? '' : 'hidden'}}">
          <block wx:for="{{item}}" wx:key="{{index}}">
            <view>
              <view class="exam-item">
                <view>{{index}}</view>
                <view>{{item}}</view>
            </view>
            </view>
          </block>
        </view>
    </view>
  </view>
</view>

控制显示隐藏的方法

show(e) {
    let index = e.currentTarget.dataset.index;
    let active = this.data.active;
    
    this.setData({
      [`selected[${index}]`]: !this.data.selected[`${index}`],
      active: index
    });

    // 如果点击的不是当前展开的项，则关闭当前展开的项
    // 这里就实现了点击一项，隐藏另一项
    if (active !== null && active !== index) {
      this.setData({ [`selected[${active}]`]: false });
    }
}

WXSS样式

.exam-body {
  transition: height 0.2s; // 指定了0.2s的高度变化效果
  height: 480rpx;
}

.hidden {
  height: 0; // 将盒子的高度设为0，也就隐藏了~
}