uView(u-collapse)折叠 展开 高度问题 无法撑开 nextTick

  • uView(u-collapse)折叠 展开 高度问题 无法撑开 nextTick已关闭评论
  • 86 次浏览
  • A+
所属分类:Web前端
摘要

 collapse是手风琴模式。
数据levelList、filmList,都是异步加载。levelList渲染正常。

    <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() 				}) 			},