本文实例为大家分享了微信小程序实现折叠展开效果的具体代码,供大家参考,具体内容如下
wxml:
<view class="page"> <!-- 总数 --> <view class="li" bindtap='changeToggle'> <view class="left">总数</view> <view class="right gray" >8</view> </view> <!--分类 --> <view class="li" data-index="0" bindtap='changeToggle'> <view class="left">类别1</view> <view class="right">3 <text class="iconfont {{selectedFlag[0]"> </text> </view> </view> <view hidden="{{!selectedFlag[0]}}"> <block wx:for="{{list01}}" wx:for-item="item" wx:for-index="index"> <view class="li bg-gray"> <view>展开1</view> </view> </block> </view> <view class="li" data-index="1" bindtap='changeToggle'> <view class="left">类别2</view> <view class="right">0 <text class="iconfont {{selectedFlag[1]"> </text> </view> </view> <view hidden="{{!selectedFlag[1]}}"> <block wx:for="{{list02}}" wx:for-item="item" wx:for-index="index"> <view class="li bg-gray"> <view>展开2</view> </view> </block> </view> <view class="li" data-index="2" bindtap='changeToggle'> <view class="left">类别3</view> <view class="right red">2 <text class="iconfont {{selectedFlag[2]"> </text> </view> </view> <view hidden="{{!selectedFlag[2]}}"> <block wx:for="{{list03}}" wx:for-item="item" wx:for-index="index"> <view class="li bg-gray"> <view>展开3</view> </view> </block> </view> <view class="li" data-index="3" bindtap='changeToggle'> <view class="left">类别4</view> <view class="right red">3 <text class="iconfont {{selectedFlag[3]"> </text> </view> </view> <view hidden="{{!selectedFlag[3]}}"> <block wx:for="{{list04}}" wx:for-item="item" wx:for-index="index"> <view class="li bg-gray"> <view>展开4</view> <view class="red">展开4右边</view> </view> </block> </view>
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 }) }, })
效果图,手风琴效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
微信小程序,折叠,展开
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无争山庄资源网 Copyright www.whwtcm.com
暂无“微信小程序实现折叠展开效果”评论...
更新日志
2024年09月25日
2024年09月25日
- 黄心懋1991-轻忧郁【滚石】【WAV+CUE】
- 群星.2000-大地金曲世纪回顾2CD【大地】【WAV+CUE】
- 王菲.1996-浮躁(2024环球MQA-UHQCD限量版)【环球】【WAV+CUE】
- 群星.2022-传家电视剧原声带【东阳欢娱】【FLAC分轨】
- 《摇滚教父 伍佰黄金精选 2CD》 [WAV+CUE][1GB]
- 《凤凰传奇 我从草原来》[WAV/分轨][400MB]
- 《叶倩文 真心真意过一生》[WAV+CUE][400MB]
- 潘越云.1985-世间女子(滚石25周年经典复刻版)【滚石】【WAV+CUE】
- 陈柏宇.2009-CANT.BE.HALF【SONY】【WAV+CUE】
- 李明依.1989-小女生【滚石】【WAV+CUE】
- 《李荣浩 新时代创作新人王》[WAV分轨][310MB]
- 《黑鸭子与马头琴 史上最动听草原音乐》[WAV+CUE][320MB]
- 《汽车发烧音乐精选CD18》[FLAC+CUE][7.1G]
- 郑希怡.2004-Perfect.Date【英皇娱乐】【FLAC分轨】
- 群星.1994-宝丽金超级孖宝2CD【宝丽金】【WAV+CUE】