uni-collapse

在做微信小程序时用collapse踩了一些坑

直接使用二级循环

每个折叠框都出现了同样的item

尝试过的解决方案

导入子组件，传值

but 子组件渲染不出来

判断是否选中，更新二级列表

该方案能够实现点哪个展哪个
but由于我的二级列表数据来自于http请求
异步请求会导致二级列表还没更新就被渲染上去了

判断时候选择，增加二级列表

请求数据时往二级列表里面加数据
使用二维数组，根据传入的一级列表index定位
该方案能够解决问题

效果

搭配上sroll-view就很优雅了

code

<uni-collapse ref="collapse"  @change="change" accordion><uni-collapse-item  :title="chapterTitle.chapterName" v-for="(chapterTitle,index) in chapterTitle"  :key="index"><view  class="chapter-item" v-for="chapter in chapterList[index]" @click="practice(chapter.id)">{{chapter.chapterName}}</view></uni-collapse-item>
</uni-collapse>

data来自于http请求，这里就不贴出了
若item显示不完全可以尝试加高height
chapterList结构长这样

chapterList:{0: {id: "20191220171143-cd77f29b-af99-4567-8927-819e843e8856", chapterName: "计算机系统知识",…}1: {id: "20191220171426-8141a731-3288-4c46-8ca0-41e483d7dd70", chapterName: "网络技术", questionCount: "427",…}2: {id: "20191220171533-c31971ab-94b3-4f54-b63d-ed486f7fef53", chapterName: "网络安全", questionCount: "120",…}3: {id: "20191220171557-f18508b3-cb9d-43f3-b51b-87e8c3bc03ef", chapterName: "计算机专业英语",…}4: {id: "20191220171612-4e8ce865-214a-4fbc-b5d2-7e96123f0277", chapterName: "综合练习1", questionCount: "192",…}5: {id: "1604720458908-a57f0465-c532-4d7d-a52c-4b15ab33346d", chapterName: "综合练习2", questionCount: "196",…}6: {id: "1604720488623-6c832709-341c-4bbf-87ba-816aefbb9e2b", chapterName: "综合练习3", questionCount: "193",…}7: {id: "1604720513029-690aa330-f860-402a-b492-a7257996db34", chapterName: "综合练习4", questionCount: "184",…}8: {id: "1604720538555-c0040824-8e9e-4d33-8cb9-1b476a03fbec", chapterName: "综合练习5", questionCount: "99",…}}

用index去索引的用数组也行

uniapp折叠框二级循环相关推荐

vue uniapp 折叠功能实现
基于我的另一篇转载文章,自己写的折叠功能类似的功能可以参考我下面的代码(前端小白) 原始版参考:vue,uniapp折叠功能_庞胖的博客-CSDN博客 <template><vie ...
android加载时二级联动点击二级联动,Android实现联动下拉框二级地市联动下拉框功能...
日常使用软件中,为了方便且规范输入,会使用到下拉框进行输入,如注册时生日选项,购物时的地址输入,都会用到下拉框,今日笔者为了巩固已学的知识,实现了二级联动下拉框用作回顾及分享给求知的新手. 思路/步骤 ...
c语言我国有13亿人口,计算机二级循环结构课件.ppt
计算机二级循环结构课件.ppt 第三章 c语言程序的控制结构 3.4 循环结构 3.4 循环结构循环算法研究: 迭代和穷举是两类具有代表性的基本循环算法 1.迭代迭代是一个不断用新值取代变量的旧值 ...
记录uni-app弹框事件无生命周期问题；uni-popup-dialog打开触发事件；uni-popup-dialog调用接口时机
项目需求:点击页面的品牌型号按钮,打开弹框,将车架号码参数传入接口获取到对应的品牌型号列表,在进行选择后关闭弹框. 实际开发中,我在父组件里面引入了弹框子组件:诡异的事情发生了: 在小程序页 ...
select下拉框二级联动
采用Layui框架两种方法实现,差别不大一.编写jsp代码二.编写后台代码(方法一) 2.1 工具类 2.2 dao层 2.3 编写对应xml 2.4 service层 2.5 serviceI ...
[LayUI]下拉框二级联动
下拉框二级联动在某些应用场景我们需要用到下拉选择框联动情形. HTML: <label class="layui-form-label">公司</label&g ...
计算机二级循环储存,【日常干货】计算机二级基础知识（第三期）
原标题:[日常干货]计算机二级基础知识(第三期) 即便是周末也不要忘了学习哦 1.下列结构中属于线性结构链式存储的是 A)双向链表 B)循环队列 C)二叉链表 D)二维数组 ▼ A[解析]双向链表也 ...
解决uni-app官方弹框popup关闭不了问题；/pages/extUI/popup/popup；uni-app弹框popup打开调用事件。unin-app弹框封装；
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210716165216781.png?x-oss-process=image/watermark,type_Zm ...
asp 下拉框二级联动
<script language = "JavaScript"> //js开始 var aaa;//定义aaa变量 aaa=0;//aaa赋0 bb = new Arr ...
计算机二级循环队列知识点,考点！计算机二级考试公共基础知识冲刺复习笔记：栈、队列和循环队列...
小编所收集到的相关计算机二级考试公共基础知识冲刺复习笔记:栈.队列和循环队列的资料大家要认真阅读哦! 1.栈(Stack)又称堆栈. (1)栈是一种运算受限的线性表,其限制是仅允许在表的一端进行插入 ...

uniapp折叠框二级循环