四时宝库

切图网专注于各种pc、手机、h5、小程序切图，经常会遇到一些问题，做个笔记供后来者参考。

列表的折叠效果用处很多，经常都会有遇到，特别是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
})
}
},