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();
	});
相关推荐
卷Java1 小时前
饼状图修复总结
java·spring boot·uni-app·echarts
说私域1 小时前
开源AI大模型、AI智能名片与S2B2C商城小程序:用户需求满足的底层逻辑与实践路径
人工智能·小程序·开源
闲蛋小超人笑嘻嘻2 小时前
find数组方法详解||Vue3 + uni-app + Wot Design(wd-picker)使用自定义插槽内容写一个下拉选择器
前端·javascript·uni-app
2501_916007473 小时前
前端开发工具都有哪些?常用前端开发工具清单与场景化推荐
android·ios·小程序·https·uni-app·iphone·webview
2501_915909065 小时前
iOS 应用上架全流程解析,苹果应用发布步骤、ipa 上传工具、TestFlight 测试与 App Store 审核经验
android·macos·ios·小程序·uni-app·cocoa·iphone
茶憶6 小时前
uniapp 请求接口封装和使用
vue.js·uni-app
肥喵蒙太奇9 小时前
uniapp 使用towxml
uni-app
Nan_Shu_61420 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
老华带你飞21 小时前
机电公司管理小程序|基于微信小程序的机电公司管理小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·微信小程序·小程序·机电公司管理小程序
卷Java1 天前
小程序前端功能更新说明
java·前端·spring boot·微信小程序·小程序·uni-app