实现抽屉列表-微信小程序

本抽屉列表的实现方法来自与微信小程序的官方实例，本人将有关代码及样式提取了出来并加以精简、添加注释，方便大家的学习与理解。

实现效果

JS

  Page({
  data: {
    list: [
      {
        id: 0,
        name: '抽屉列表1',
        open: false,
        options: ['选项1', '选项2', '选项3']
      },
      {
        id: 1,
        name: '抽屉列表2',
        open: false,
        options: ['选项1', '选项2', '选项3']
      },
      // 增加列表请在此处添加新的列表对象
    ]
  },

  // 控制抽屉开关
  kindToggle: function (e) {
    var id = e.currentTarget.id, list = this.data.list;

    // 使用id获取打开的子列表
    for (var i = 0, len = list.length; i < len; ++i) {
      if (list[i].id == id) {
        list[i].open = !list[i].open
      } else {
        list[i].open = false
      }
    }
    this.setData({
      list: list
    });
  }
})

WXML

<block wx:for-items="{{list}}" wx:key="{{item.id}}">
  <!-- 列表item -->
  <view class="list-item">
    <view id="{{item.id}}" class="list-item-hd {{item.open ? 'list-item-hd-show' : ''}}" bindtap="kindToggle">
      <view class="list-title">{{item.name}}</view>
      <view class="{{item.open ? 'state-arrow-open' : ''}}">▼</view>
    </view>

    <!-- 打开的抽屉item -->
    <view class="list-item-bd {{item.open ? 'list-item-bd-show' : ''}}">
      <view class="option-box {{item.open ? 'option-box-show' : ''}}">
        <!-- 子选项 -->
        <block wx:for-items="{{item.options}}" wx:for-item="options" wx:key="*item">
          <view class="option">
            <view class="option-text">{{options}}</view>
            <view >＞</view>
          </view>
        </block>
      </view>
    </view>

  </view>
</block>

WXSS

.list-item {
  margin: 20rpx 0;
  background-color: #FFFFFF;
  border-radius: 4rpx;
  overflow: hidden;
}

.list-item-hd {
  padding: 30rpx;
  display: flex;
  align-items: center;

  transition: opacity .3s;
}
.list-item-hd-show {
  opacity: .2;
}
.list-title{
  flex: 1;
}
.list-item-bd {
  height: 0;
  overflow: hidden;
}
.list-item-bd-show {
  height: auto;
}
.option-box {
  opacity: 0;
  position: relative;
  background-color: #FFFFFF;
  line-height: 1.41176471;
  font-size: 34rpx;

  transform: translateY(-50%);
  transition: .3s;
}
.option-box-show {
  opacity: 1;
  transform: translateY(0);
}

.state-arrow-open {
  transform: rotate(180deg);
  transition: transform 0.3s;
}

.option {
  padding: 20rpx 30rpx;
  position: relative;
  display: flex;
  align-items: center;
}

.option:before {
  content: " ";
  position: absolute;
  left: 30rpx;
  top: 0;
  right: 30rpx;
  height: 1px;
  border-top: 1rpx solid #D8D8D8;
  color: #D8D8D8;
}
.option:first-child:before {
  display: none;
}
.option-text {
  flex: 1;
}