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

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

如下图展示:

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

js中的数据是这样的

代码实现:

javascript 复制代码
<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;">
                    <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数组重新赋值!

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

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

算了,解决就好!2024.04.19

相关推荐
熊出没7 分钟前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN7 分钟前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
用户990450177800921 分钟前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家24 分钟前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞1 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636021 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军1 小时前
AI领域又新增协议: AG-UI
前端·openai·agent