【微信小程序】实现折叠功能，折叠不同的列表

要实现微信小程序中的折叠功能，可以使用wx:if或hidden属性来控制列表的显示与隐藏。同时，可以使用icon组件来添加指示箭头。

首先，在wxml文件中创建两个List列表，使用一个变量来控制列表的显示与隐藏：

<view><!-- 列表1 --><view class="list"><view class="header" bindtap="toggleList1"><text class="title">{{list1Title}}</text><icon class="arrow" type="{{list1Hidden ? 'triangle' : 'triangle-down'}}"></icon></view><view wx:if="{{!list1Hidden}}" class="content"><!-- 列表1的内容 --></view></view><!-- 列表2 --><view class="list"><view class="header" bindtap="toggleList2"><text class="title">{{list2Title}}</text><icon class="arrow" type="{{list2Hidden ? 'triangle' : 'triangle-down'}}"></icon></view><view wx:if="{{!list2Hidden}}" class="content"><!-- 列表2的内容 --></view></view>
</view>

在js文件中，添加点击事件的处理函数，用来切换列表的显示与隐藏：

Page({data: {list1Hidden: true,list2Hidden: true,list1Title: "列表1",list2Title: "列表2"},toggleList1: function () {this.setData({list1Hidden: !this.data.list1Hidden});},toggleList2: function () {this.setData({list2Hidden: !this.data.list2Hidden});}
})

在wxss文件中，可以自定义列表的样式和指示箭头的样式：

.list {background-color: #f5f5f5;margin-bottom: 10px;
}.header {display: flex;align-items: center;padding: 10px;background-color: #fff;
}.title {flex: 1;font-size: 16px;
}.arrow {font-size: 20px;color: #999;
}