- A+
所属分类:Web前端
<u-collapse ref="myCollapse" @change="change" accordion> <u-collapse-item v-for="(level,index) in levelList" :key="index" :title="level.name" ref="collapseHeight"> <view class=""> <view v-for="(film,i) in filmList" :key="i" class="u-p-20"> {{film.name}} </view> </view> </u-collapse-item> </u-collapse>
async change(list) { const index = list.findIndex((item) => { return item.status === 'open' }) if (index === -1) { return } this.filmList = await this.getFilmData(index + 1) this.$nextTick(() => { this.$refs.myCollapse.init(); }) },
collapse是手风琴模式。
数据levelList、filmList,都是异步加载。levelList渲染正常。
filmList数据在加载完成后,按照官方文档提供的方法:init(); 重新计算高度。但是无法正常撑开。
试了网上的多个方法,但是都没有效果。
于是分析了下源码,发现注释掉一行代码就行。文件路径:uni_modules/uview-ui/components/u-collapse-item/u-collapse-item.vue
this.expanded = this.name == value
// 异步获取内容,或者动态修改了内容时,需要重新初始化 init() { // 初始化数据 this.updateParentData() if (!this.parent) { return uni.$u.error('u-collapse-item必须要搭配u-collapse组件使用') } const { value, accordion, children = [] } = this.parent if (accordion) { if (uni.$u.test.array(value)) { return uni.$u.error('手风琴模式下,u-collapse组件的value参数不能为数组') } // this.expanded = this.name == value } else { if (!uni.$u.test.array(value) && value !== null) { return uni.$u.error('非手风琴模式下,u-collapse组件的value参数必须为数组') } this.expanded = (value || []).some(item => item == this.name) } // 设置组件的展开或收起状态 this.$nextTick(function() { this.setContentAnimate() }) },