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();
	});
相关推荐
阿斌_bingyu7091 小时前
眼镜店AR在线试戴小程序技术解决方案
小程序·ar
2401_865854881 小时前
Uniapp和Flutter哪个更适合企业级开发?
flutter·uni-app
雪芽蓝域zzs1 小时前
uniapp 省市区三级联动
前端·javascript·uni-app
总爱写点小BUG1 小时前
UniApp 图标方案终极排坑:告别 FontClass,拥抱真 SVG 组件化
前端框架·uni-app
计算机毕设指导61 小时前
基于微信小程序的智能停车场管理系统【源码文末联系】
java·spring boot·微信小程序·小程序·tomcat·maven·intellij-idea
2501_933907212 小时前
如何选择西安优质小程序开发服务与本凡码农合作?
科技·微信小程序·小程序
说私域2 小时前
破局互联网产品开发困境:开源AI智能名片链动2+1模式S2B2C商城小程序的实践与启示
人工智能·小程序·开源·私域运营
宁夏雨科网17 小时前
文具办公用品小程序商城,开发一个难吗
小程序·商城小程序·文具小程序·文具商城
Rysxt_21 小时前
UniApp获取安卓系统权限教程
android·uni-app
说私域1 天前
开源链动2+1模式商城小程序在深度分销数字化转型中的应用研究
人工智能·小程序·开源·流量运营·私域运营