在使用折叠面板的时候,可能会遇到内容展示不全、无法自适应高度的问题。可以通过一个方法,计算并自适应高度,避免内容展示不全。
①给折叠面板绑定ref,通过change监听面板打开
<template>
<view>
<u-collapse ref="height" @change="handleOpenChange">
<u-collapse-item title="折叠项一">
<view>这里是折叠项的内容 1 假如内容特别特别特别特别长...展示不全</view>
</u-collapse-item>
<u-collapse-item title="折叠项二">
<view>这里是折叠项的内容 2</view>
</u-collapse-item>
</u-collapse>
</view>
</template>
② 写计算方法,重新初始化内部高度计算
init方法需要通过ref
调用, 注意height
//计算面板高度
handleOpenChange() {
this.$nextTick(() => {
this.$refs.height.init()
})
},