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

原创

已于 2022-10-18 16:44:57 修改 · 8.6k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #前端

于 2022-10-18 16:43:18 首次发布

在uni-app开发中遇到使用uni-collapse折叠面板嵌套多层时，展开子面板高度无法自适应的问题。官方文档建议使用resize方法，但实际操作中，当数据量较大时，仍可能出现问题。通过在handleHeight方法中添加setTimeout延迟调用resize()，设置适当的延时时间（如500ms），解决了高度更新不全的问题。这种方法确保了在数据完全加载后再更新面板高度，从而避免了显示异常。

在使用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<