uniapp-外部view根据图片高度自适应，解决​uni-collapse 折叠面板，在折叠开的时候​和图片未加载出来高度不准确的问题_uniapp 图片自适应容器

目录

图片未加载出来高度问题

uni-collapse 折叠面板 组件高度问题

注：我这里使用了自己封装获取节点信息 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'}"