微信小程序实现折叠展开效果

本文实例为大家分享了微信小程序实现折叠展开效果的具体代码，供大家参考，具体内容如下

wxml：

rush:xml;"> 8

wxss:

rush:css;"> /* 列表详情 */

.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;
}

.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
})
},})