微信小程序-折叠列表(互斥)

最新推荐文章于 2023-07-20 20:44:02 发布

cl&xhb

最新推荐文章于 2023-07-20 20:44:02 发布

阅读量1.4k

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/weixin_42059109/article/details/107843438

版权

本文介绍如何在微信小程序中实现互斥的折叠列表。通过一个数组动态控制列表的展开与折叠，每次点击列表项时，根据点击的路径更新数组。通过判断数组元素是否存在来决定子列表的显示状态。详细探讨了三种不同点击情况下的状态切换逻辑。

摘要由CSDN通过智能技术生成

折叠列表（互斥）

一个数组实现折叠列表

第一层 0
- 第二层0
- 第二层1
第一层1
- 第二层0
- 第二层1
  - 列表

wxml

<scroll-view class="样式" scroll-y="true" scroll-top="{
    {scrollTop}}">
    
    <!-- 第一层 -->
     <view class="样式" wx:for="{
    {5}}" wx:for-item="piece" wx:for-index="piece_num" wx:key="piece_num">
         
        <!-- 标题部分 -->
        <view class="样式"  data-index="[{
    {piece_num}}]" bindtap="changeState">
          <view class