目录
注:我这里使用了自己封装获取节点信息 getCreateSelectorQueryNode() 方法 代码
图片未加载出来高度问题
<view id="box" :style="'height:' + boxH + 'px;'">
<image id="img" :src="src" :mode="mode" @load="onLoadHandler"></image>
</view>
利用 image 图片加载完成执行的事件 onLoadHandler,获取当前图片最新的高度
const boxH = shallowRef(0)
const onLoadHandler = () => {
nextTick(() => {
getCreateSelectorQueryNode('#img').then(res => {
boxH.value = res.height
})
})
}
uni-collapse 折叠面板 组件高度问题
比如:uni-collapse 折叠面板 在折叠开的时候,myBox 组件中图片未加载出来高度不准确的问题
<uni-collapse :accordion="true">
<uni-collapse-item :customH="customH">
<template v-slot:title>
<view>title</view>
</template>
<myBox id="myBox" " @load="load"/>
</uni-collapse-item>
</uni-collapse>
myBox 组件中的 image 加载完成后,传递事件给父组件,然后获取 myBox 的高度,赋给 uni-collapse 新高度
const customH= shallowRef(0)
const load = () => {
nextTick(() => {
getCreateSelectorQueryNode('#myBox').then(res => {
customH.value = res.height
})
})
}
在 uni-collapse 折叠面板 uni-collapse-item 组件中,利用传递过去 customH 新的高度,更改 uni-collapse-item__wrap 类名中的 动态行内样式
:style="{minHeight: (isOpen ? (customH ? customH : height) :0) +'px'}"