uniapp 里折叠面板嵌套 uni-collapse 高度不能自适应解决办法

在使用uniapp开发小程序时，使用折叠面板uni-collapse嵌套多层的时候，子层在展开的时候，uni-collapse高度不能适应，官方文档有提到uni-collapse折叠面板在动态添加数据，带动画的折叠面板高度不更新的问题，可以使用resize 方法。示例代码如下：

<template>
	<view>
		<uni-collapse ref="collapse" accordion>
			<uni-collapse-item title-border="none" :border="false">
				<template v-slot:title>
					<uni-list>
						<uni-list-item 
						title="物业总额" 
						:rightText="bill.wyMoneyTotal+'元'"
						:show-extra-icon="true"/>
					</uni-list>
				</template>
				<view class="content">
					<uni-list>
						<uni-collapse accordion>
							<uni-list>
								<uni-collapse-item title-border="none" :border="false" v-for="(it,index) in bill.items" :key="index">
									<template v-slot:title>
										<uni-list>
											<uni-list-item 
											:title="it.yibiaoName" 
											:rightText="it.billMoney+'元'"
											:show-extra-icon="true"
											@click.native="handleHeight"
											/>
										</uni-list>
									</template>
									<view>
										<uni-list>
											<uni-list-item class="content pl-5 pr-4" title="抄表时间" :rightText="it.endDate"/>
											<uni-list-item class="content pl-5 pr-4" title="上次读数" :rightText="it.periodData"/>
											<uni-list-item class="content pl-5 pr-4" title="本次读数" :rightText="it.nowData"/>
											<uni-list-item class="content pl-5 pr-4" title="用量" :rightText="it.useNum"/>
											<uni-list-item class="content pl-5 pr-4" title="倍率" :rightText="it.rate"/>
											<uni-list-item class="content pl-5 pr-4" title="分摊比例" :rightText="it.ratio+'%'"/>
										</uni-list>
									</view>
								</uni-collapse-item>
							</uni-list>
						</uni-collapse>
					</uni-list>
				</view>
			</uni-collapse-item>
		</uni-collapse>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				contractId:"65",
				yearMonthDate:"2022-10",
				bill:{},
			}
		},
		onLoad(e){
			//this.contractId = e.contractId;
			//this.yearMonthDate = e.yearMonthDate
		},
		onPullDownRefresh(){ //下拉刷新监听器
			this.getBill();
		},
		created(){
			this.getBill();
		},
		methods: {
			getBill(){
				this.$api.getBill(this.contractId,this.yearMonthDate).then(res=>{
					console.log(res)
					this.bill = res.data.data;
				}).finally(()=>{
					//停止下拉刷新
					uni.stopPullDownRefresh()
				});
			},
			// 修正前的代码
			handleHeight() {
				this.$nextTick(() => {
					this.$refs.collapse.resize();
				});
			},
		}
	}
</script>

但是子级面板在展开的时候有时还是不能更新当前列表高度，为什么说有时呢？因为展示数据量比较少的时候没有问题，如果需要展示的数据量比较多的时候，就不行了。
这时候我猜是不是需要延时调用resize()方法，因为面板数据还没有加载完resize()方法就执行了，所以就出现列表高度更新不全面。下面修正代码：

// 修正后的代码
	handleHeight() {
		this.$nextTick(() => {
			setTimeout(()=>{
				this.$refs.collapse.resize();
			},500)
		});
	},

问题完美解决！就是加个延时定时器，但是这里要注意的话这个延时时间要根据面板的展示的数据量来设置，当我设置为100时，发现还是有问题，因为我的数据量比较大，然后设置成500，这样就没问题了，每次都能自动更新面板的高度。如果对大家有帮助，记得关注，谢谢！