二級分類抽屜摺疊菜單

<view class="index-bd">
    <view class="kind-list">
        <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>
                    <!-- <image class="kind-list-img" src="resources/kind/{{item.id}}.png"></image> -->
                </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">
                            <view class="navigator">
                                <!-- <view url="pages/{{page}}/{{page}}" class="navigator"> -->
                                <view class="navigator-text">{{page}}</view>
                                <view class="navigator-arrow"></view>
                            </view>
                        </block>
                    </view>
                </view>
            </view>
        </block>
    </view>
</view>

.kind-list-item {
  margin: 20rpx 0;
  background-color: #FFFFFF;
  border-radius: 4rpx;
  overflow: hidden;
}
.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 .3s;
}
.kind-list-item-hd-show {
  opacity: .2;
}
.kind-list-item-bd {
  height: 0;
  overflow: hidden;
}
.kind-list-item-bd-show {
  height: auto;
}

 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
            }
        }
        this.setData({
            list
        })
    },

以上我們就可以實現我們要的功能了,如有問題可以私信小編，無償解決問題噢~

 

喜歡上方小程序,需要源碼的,私信小編留下郵箱。