php怎么写评论折叠展开,微信小程序实现折叠展开效果

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

wxml：

总数

8

类别1

3

展开1

类别2

0

展开2

类别3

2

展开3

类别4

3

展开4

展开4右边

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;

}

.li .icon-xiala ,.icon-shangjiantou {

color: #999;

font-size: 28rpx;

}

.gray {

color: #8e8e8e;

}

.red {

color: #fe2e2e;

}

js:

Page({

data: {

list01: [

{ item_id: 1 }, { item_id: 11 }, { item_id: 11 },

],

list02: [

],

list03: [

{ item_id: 11 }, { item_id: 11 }

],

list04: [

{ item_id: 11 }, { item_id: 11 }, { item_id: 11 }

],

// 展开折叠

selectedFlag: [false, 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

})

},

})

效果图，手风琴效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。