uniapp+vue3做小程序,获取容器高度

小程序获能用createSelectorQuery,如果是子组件,后面可以额外加一个参数in来指定获取dom的范围。小程序里面可以直接.in(this),但是vue3没有this了,那就只能通过getCurrentInstance去获取当前实例代替this ,注意这里需要用解构的方法把proxy引进来

复制代码
		<view class="image-container">内容</view>

import { ref, reactive, onMounted, nextTick, watch, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
// 获取容器尺寸
	const getContainerSize = () => {
		new Promise((resolve, reject) => {
			let view = uni.createSelectorQuery().in(proxy);
			view
				.select('.image-container')
				.boundingClientRect((data) => {
					containerWidth.value = data.width;
					containerHeight.value = data.height;
					console.log(data);
					resolve(data);
				})
				.exec();
		}).then((res) => {
			
		});
	};


/ 组件挂载后初始化
	onMounted(async () => {
		await nextTick();
		getContainerSize();
	});
相关推荐
CHU72903513 小时前
生鲜团购商城小程序:新鲜触手可及的便捷购物新体验
小程序
医疗信息化王工19 小时前
钉钉小程序开发实战:手术查询小程序
小程序·钉钉·手术查询
Fate_I_C19 小时前
uniappx 鸿蒙运行包制作失败
华为·uni-app·uniapp·harmonyos
软件开发技术20 小时前
新版点微同城主题源码34.7+全套插件+小程序前后端 源文件
小程序·php
chQHk57BN20 小时前
跨平台前端开发:用Flutter和UniApp一次编写多端运行
flutter·uni-app
mon_star°1 天前
消防安全培训小程序项目亮点与功能清单
小程序
自然 醒1 天前
uni-app开发微信小程序,如何使用towxml去渲染md格式和html标签格式的内容?
微信小程序·uni-app·html
编程迪1 天前
基于Java和Vue开发的在线问诊系统医疗咨询小程序APP
小程序
CHB1 天前
uni-agent,你的数字员工来了
人工智能·uni-app·vibecoding
CHU7290351 天前
知识触手可及:在线教学课堂APP的沉浸式学习体验
前端·学习·小程序