微信小程序使用 Vant Weapp 中 Collapse 折叠面板 的问题！

需求：结合Tab 标签页 和 Collapse 折叠面板 组合成显示课本和章节内容，并且用户体验要好点！

如下图展示：

问题：如何使用Collapse 折叠面板 将内容循环展示出来？

js中的数据是这样的

代码实现：

van-tabs animated sticky active="{{ active }}" title-active-color="#e54d42" line-height="10rpx"  tab-active-class="tab-item" ellipsis="{{false}}" bind:click="toBook">
  van-tab wx:for="{{navLists}}" wx:key="nav" title="{{item.kb}}  {{item.title}}">
  !--  -->
    van-collapse value="{{ activeNames }}" bind:change="onChange" wx:for="{{ book }}" wx:key="b" wx:for-item='books' wx:for-index="bookindex">
      !--  -->
      van-collapse-item title="{{ books.name }}" name="{{ bookindex }}">
           view wx:for="{{books.content}}" wx:key="c" wx:for-item="jie" wx:for-index="jieindex">
              navigator url="" style="padding: 20rpx 0 20rpx 10rpx;">
                 view style="display: flex;align-items: center;justify-content: space-between;padding-bottom: 10rpx;"&服务器托管gt;
                    view>{{jie.title}} text> [ {{jie.complete}} / {{jie.num}} ] /text>/view>
                    van-icon name="arrow" />
                 /view>
                 van-progress
                    percentage="{{jie.percent || 0}}"
                    pivot-text="{{jie.percent || 0}}%"
                    pivot-color="#0081ff"
                    stroke-width="12"
                    color="linear-gradient(to right, #be99ff, #0081ff)"
                  />
              /navigator>
           /view>
      /van-collapse-item>
    /van-collapse>
  /van-tab>
/van-tabs>

这里要注意的有：
1、value=“{{ activeNames }}” 这里的activeNames仅仅表示点击那章的标号；
在js中，activeNames:[‘’]；必修是数组形式！空表示都不展开。
2、循环的数据改变！也就是book数组重新赋值！

这里面还有一个问题如下：

onChange(e) {
    //这里有一个很奇怪的问题，就是每次点击章的时候，会自动添加一项，这一项居然的index，但不知道为什么？
    this.setData({
      book:this.data.book,  //这里是选择哪本书之后，要赋予的该书的章节内容！
      activeNames:e.detail  //这里表示服务器托管的是显示的哪一项
    })
  },

算了，解决就好！2024.04.19

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: STM32基础–初识 STM32

什么是 STM32 对于STM32，从字面意思上来理解，ST是意法半导体，M是Microelectronics的缩写，其中32表示的是32位，那么整合起来理解就是：STM32就是指的ST公司开发的32位微控制器。在如今的32位控制器中，STM32可以说是最闪耀…