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

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

wxml:

view class='page '！-总数-view class=' Li ' bind tap=' change toggle ' view class=' left '总数/view view class=' right gray ' 8/view/view！-分类-view class=' Li ' data-index=' 0 ' bind tap=' change toggle ' view class=' left '类别1/view view class=' right ' 3 text class=' icon font { { selectedFlag[0]？'表示“像”之义尚建头： '图标-夏拉} } '/text/view/view view hidden=' { {！selectedFlag[0]} ' block wx : for=' { { list 01 } } ' wx : for-item=' item ' wx : for-index=' index ' view class=' Li BG-gray ' view展开1/视图/视图/块/视图视图类='li '数据-索引='1' bindtap='changeToggle '视图类='左侧'类别2/view view class=' right ' 0 text class=' icon font { { selectedFlag[1]？'表示“像”之义尚建头： '图标-夏拉} } '/text/view/view view hidden=' { {！selectedFlag[1]} ' block wx : for=' { { list 02 } } ' wx : for-item=' item ' wx : for-index=' index ' view class=' Li BG-gray ' view展开2/视图/视图/块/视图视图类='li '数据-索引='2' bindtap='changeToggle '视图类='左侧'类别3/view view class=' right red ' 2 text class=' icon font { { selectedFlag[2]？'表示“像”之义尚建头： '图标-夏拉} } '/text/view/view view hidden=' { {！selectedFlag[2]} ' block wx : for=' { { list 03 } } ' wx : for-item=' item ' wx : for-index=' index ' view class=' Li BG-gray ' view展开3/视图/视图/块/视图视图类='li '数据-索引='3' bindtap='changeToggle '视图类='左侧'类别4/view view class=' right red ' 3 text class=' icon font { { selectedFlag[3]？'表示“像”之义尚建头： '图标-夏拉} } '/text/view/view view hidden=' { {！selectedFlag[3]} } ' block wx : for=' { { list 04 } } ' wx : for-item=' item ' wx : for-index=' index ' view class=' Li BG-gray ' view展开4/view view class='red '展开四右边/view/view/block/view wxss 3360

/* 列表详情*/.li {背景色： # fffdisplay : flex justice-content :空格；font-size : 34 rpx宽度： 92%;划水： 0.4%;高度： 100 rpx线高： 100 rpx边框-底部： 1rpx实心# f1f1f1}。BG-灰色{背景-颜色： #ccc！重要；边框-bottom: 1rpx实心#fff！重要；}.李。图标-夏拉，图标-尚建头{ color : # 999 font-size : 28 rpx；}.灰色{ color : # 8e8e }。红色{ color: # fe2e2e}js:

页面({ data : { list 01:[{ item _ id : 1 }，{ item_id: 11 }，{ item_id: 11 }，]，list02: [ ]，list03: [ { item_id: 11 }，{ item _ id 3: 11 }]，list 04:[{ item _ id 3: 11 })展开折叠selectedFlag: [false，false，false，false]，}，//展开折叠选择changetoggle :函数(e){ var index=e .当前目标。数据集。指数；如果(这个。数据。selectedflag[index]){ this。数据。selected flag[index]=false；} else { this。数据。selected flag[index]=true；}这个。setdata({ selectedflag : this。数据。selectedflag })}，})效果图，手风琴效果：

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