wxml：
<!--展开折叠分类列表 -->
<view class="classify-item" data-index="0" bindtap='changeToggle'>类别1</view>
<block wx:for="{{list01}}" wx:key='index'>
<view class="classify-item" hidden="{{!selectedFlag[0]}}">展开1</view>
</block>
<view class="classify-item" data-index="1" bindtap='changeToggle'>类别2</view>
<block wx:for="{{list02}}" wx:key='index'>
<view class="classify-item" hidden="{{!selectedFlag[1]}}">展开2</view>
</block>
wxss：
page{
background: #EBF3F7;
}
.classify-item {
height: 109rpx;
line-height: 109rpx;
border-bottom: 1rpx solid #EBF3F7;
background: #fff;
}
js：
Page({
data: {
list01: [{item_id: 1},{item_id: 1},{item_id: 1}],
list02: [{item_id: 1},{item_id: 1}],
selectedFlag: [false, false]
},
// 展开折叠选择
changeToggle: function(e) {
var that = this;
var index = e.currentTarget.dataset.index;
if (that.data.selectedFlag[index]) {
that.data.selectedFlag[index] = false;
} else {
that.data.selectedFlag[index] = true;
}
that.setData({
selectedFlag: that.data.selectedFlag
})
},
})
实际效果：
