小程序列表展开收起功能

index.wxml
<block wx:for-items="{{list}}" wx:key="{{item.id}}">
  <view class="kind-list-item">
    <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">
      <view class="kind-list-text">{{item.name}}</view>
    </view>
    <view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
      <view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
        <block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">
          <navigator url="pages/{{page}}/{{page}}" class="navigator">
            <view class="navigator-text">{{page}}</view>
            <!-- icon -->
            <view class="navigator-arrow"></view>
          </navigator>
        </block>
      </view>
    </view>
  </view>
</block>

index.css
.navigator-box {
  opacity: 0;
  position: relative;
  background-color: #fff;
  line-height: 1.41176471;
  font-size: 34rpx;
  transform: translateY(-50%);
  transition: 0.3s;
}

.navigator-box-show {
  opacity: 1;
  transform: translateY(0);
}

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

.navigator:before {
  content: " ";
  position: absolute;
  left: 30rpx;
  top: 0;
  right: 30rpx;
  height: 1px;
  border-top: 1rpx solid #d8d8d8;
  color: #d8d8d8;
}

.navigator:first-child:before {
  display: none;
}

.navigator-text {
  flex: 1;
}

.navigator-arrow {
  padding-right: 26rpx;
  position: relative;
}

.navigator-arrow:after {
  content: " ";
  display: inline-block;
  height: 18rpx;
  width: 18rpx;
  border-width: 2rpx 2rpx 0 0;
  border-color: #888;
  border-style: solid;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
  top: 50%;
  margin-top: -8rpx;
  right: 28rpx;
}

.kind-list-item {
  margin: 20rpx 0;
  background-color: #fff;
  border-radius: 4rpx;
  overflow: hidden;
  border-bottom: 1px dashed #888;
}

.kind-list-item:first-child {
  margin-top: 0;
}

.kind-list-text {
  flex: 1;
}

.kind-list-img {
  width: 60rpx;
  height: 60rpx;
}

.kind-list-item-hd {
  padding: 30rpx;
  display: flex;
  align-items: center;
  transition: opacity 0.3s;
}

.kind-list-item-hd-show {
  opacity: 0.2;
}

.kind-list-item-bd {
  height: 0;
  overflow: hidden;
}

.kind-list-item-bd-show {
  height: auto;
}

index.js

Page({
    data: {
    list: [{
      id: 'view',
      name: '视图容器',
      open: false,
      pages: ['view', 'scroll-view', 'swiper', 'movable-view', 'cover-view']
    }, {
      id: 'content',
      name: '基础内容',
      open: false,
      pages: ['text', 'icon', 'progress', 'rich-text']
    }, {
      id: 'form',
      name: '表单组件',
      open: false,
      pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'picker-view', 'radio', 'slider', 'switch', 'textarea']
    }, {
      id: 'nav',
      name: '导航',
      open: false,
      pages: ['navigator']
    }, {
      id: 'media',
      name: '媒体组件',
      open: false,
      pages: ['image', 'audio', 'video', 'camera']
    }, {
      id: 'map',
      name: '地图',
      pages: ['map']
    }, {
      id: 'canvas',
      name: '画布',
      pages: ['canvas']
    }, {
      id: 'open',
      name: '开放能力',
      pages: ['ad', 'open-data', 'web-view']
    }]
  },

  /**
   * 收缩核心代码
   */
  kindToggle(e) {
    const id = e.currentTarget.id
    const list = this.data.list
    for (let i = 0, len = list.length; i < len; ++i) {
      if (list[i].id === id) {
        list[i].open = !list[i].open
      } else {
        list[i].open = false
      }
    }

    /**
     * key和value名称一样时，可以省略
     *
     * list:list=>list
     */
    this.setData({
      list
    })
  }
})