本文实例为大家分享了微信小程序实现折叠展开效果的具体代码，供大家参考，具体内容如下
wxml：
wxss:
.li {
background-color: #fff;
display: flex;
justify-content: space-between;
font-size: 34rpx;
width: 92%;
padding: 0 4%;
height: 100rpx;
line-height: 100rpx;
border-bottom: 1rpx solid #f1f1f1;
}
.bg-gray{
background-color: #ccc!important;
border-bottom: 1rpx solid #fff!important;
}
background-color: #fff;
display: flex;
justify-content: space-between;
font-size: 34rpx;
width: 92%;
padding: 0 4%;
height: 100rpx;
line-height: 100rpx;
border-bottom: 1rpx solid #f1f1f1;
}
.bg-gray{
background-color: #ccc!important;
border-bottom: 1rpx solid #fff!important;
}
.li .icon-xiala,.icon-shangjiantou {
color: #999;
font-size: 28rpx;
}
.gray {
color: #8e8e8e;
}
.red {
color: #fe2e2e;
}
js:
<div class="jb51code">
<pre class="brush:js;">
Page({
data: {
list01: [
{ item_id: 1 },{ item_id: 11 },],list02: [
],list03: [
{ item_id: 11 },{ item_id: 11 }
],list04: [
{ item_id: 11 },// 展开折叠
selectedFlag: [false,false,false],},// 展开折叠选择
changeToggle:function(e){
var index = e.currentTarget.dataset.index;
if (this.data.selectedFlag[index]){
this.data.selectedFlag[index] = false;
}else{
this.data.selectedFlag[index] = true;
}
this.setData({
selectedFlag: this.data.selectedFlag
})
},})
