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();
	});
相关推荐
2501_933907214 分钟前
宁波小程序开发服务与技术团队专业支持
科技·微信小程序·小程序
sheji34169 小时前
【开题答辩全过程】以 基于微信小程序的少儿编程学习平台为例,包含答辩的问题和答案
学习·微信小程序·小程序
const_qiu11 小时前
微信小程序自动化测试100%通过率实践
微信小程序·小程序
Greg_Zhong15 小时前
小程序中登出/切换/重置页面状态的使用
小程序
你的眼睛會笑15 小时前
uni-app 实战:使用 lime-painter 实现页面内容一键生成海报并下载
uni-app
一字白首15 小时前
微信小程序进阶实战:从 UI 组件库到全局状态管理全解DAY05
ui·微信小程序·小程序
一只程序熊15 小时前
uniapp 高德地图 打开选择地址报错,也没有展示出附近的位置
android·uni-app
土土哥V_araolin1 天前
双迪大健康新零售系统开发要点
小程序·个人开发·零售
2501_915909061 天前
不用越狱就看不到 iOS App 内部文件?使用 Keymob 查看和导出应用数据目录
android·ios·小程序·https·uni-app·iphone·webview
万物得其道者成1 天前
uni-app Android 离线打包:多环境(prod/dev)配置
android·opencv·uni-app