【uniapp】uview中的Collapse组件动态获取数据后重新计算面板高度

uniapp中使用uview的Collapse组件动态获取数据后展开面板重新计算面板高度

问题描述

uview的Collapse折叠面板组件，动态获取的数据，当展开面板时不是高度不够就是下面多出半截空白，影响用户使用体验

解决方案

uview提供了init方法，来重新初始化内部高度计算

案例代码

<template>
  <u-collapse ref="myCollapse" :item-style="itemStyle" :head-style="headStyle" event-type="close">
	<u-collapse-item :index="index" :title="item.title" :open="item.open"
		v-for="(item, index) in navList" :key="index" @change="handleOpenChange(item, index)">
		<view class="collapse-item">
			<u-row :gutter="10">
				<u-col span="3" v-for="(item1,index1) in item.children" :key="index1">
					<navigator :url="item1.url">
						<view class="mainBussInner">
							<view class="txt">
								{{item1.title}}
							</view>
						</view>
					</navigator>
				</u-col>
			</u-row>
		</view>
	</u-collapse-item>
  </u-collapse>
</template>

按照uview文档直接使用init()方法，会发现报错

handleOpenChange(item, index) {
	setTimeout(() => {
		this.$refs.myCollapse[index].init();
	}, 20);
}

打印this.$refs.myCollapse时this.$refs.myCollapse[index]下面没有init()方法，逐级查找会发现在$refs.myCollapse的childrens下找到了相应的子面板，于是乎，给$refs.myCollapse.childrens[index]使用init()方法即可解决以上问题

最终解决方案

在这里使用setTimeout和使用this.$nextTick()效果都是一样的

handleOpenChange(item, index) {
	setTimeout(() => {
		this.$refs.myCollapse.childrens[index].init();
	}, 20);
}

最后问题得以解决，皆大欢喜！！！！！

以上是个人经验，希望对大家有所帮助！