2021年6月8日

微信小程序切图之 列表折叠展开效果


列表的折叠效果用处很多,经常都会有遇到,特别是html5手机版,pc版的切图的时候,小程序切图也不例外,不过小程序的写法和html的略有不同,和vue的逻辑更为相似,下面附关键代码片段,亲测有用。

wxml文件


<view class="fold__panel">
<block wx:for="{{dataList}}" wx:key="LMF_ID" wx:for-item="dataInfo" wx:for-index="dataIndex">
<view class="fold__items" data-index="{{dataIndex}}" catchtap="listDataClick">
<!-- 标题 -->
<view class="fold__item--head">
<view class="fold__head--l">
<text class="fold__head--tag">一对一</text>
<text class="fold__head--title ellipsis">TOEFL 一对一规划</text>
</view>
<view class="fold__head--r {{showIndex==dataIndex?'on':''}}">
<i-icon type="arrow-down" size="24" color="#EBEBEB" />
</view>
</view>
<!-- 展开内容 -->
<view wx:if="{{showIndex==dataIndex}}" class="fold__item--content">
展开展开展开展开展开展开展开展开展开展开展开展开展开
</view>
</view>
</block>
</view>

js文件


/**
* 组件的初始数据
*/
data: {
showIndex: 0,
dataList: [1, 2, 3, 4, 5]
},
/**
* 列表数据点击时
*/
listDataClick(e) {
if (e.currentTarget.dataset.index != this.data.showIndex) {
this.setData({
showIndex: e.currentTarget.dataset.index
})
} else {
this.setData({
showIndex: 0
})
}
},

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732

标签: