uni-app多端开发踩坑日记之子组件动态获取元素高度

最新推荐文章于 2025-05-06 10:56:26 发布

原创最新推荐文章于 2025-05-06 10:56:26 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #前端

bug 专栏收录该内容

6 篇文章

订阅专栏

本文介绍使用uni-app开发多端应用时，在小程序子组件中动态获取元素高度的方法。针对获取高度为null的问题，通过使用uni.createSelectorQuery().in(this)解决，并对比了H5环境下的差异。

使用uni-app开发多端项目时，小程序中在子组件动态获取高度为null，但是在H5中就可以获取到

uni.getSystemInfo({
	 success: function (res) {
		let obj2 = uni.createSelectorQuery().select(".success_h");
		obj2.boundingClientRect(function (data) {
			console.log("itemHeight3", data);
			this.successHeight = data.height
		}).exec();
	},
});

打印“itemHeight3”小程序中为null，H5中就有值，经过一顿百度得知在小程序中需要用 in(this)

uni.getSystemInfo({
	success: function (res) {
		let obj2 = uni.createSelectorQuery().in(this).select(".success_h");
		obj2.boundingClientRect(function (data) {
			console.log("itemHeight3", data);
			this.successHeight = data.height
		}).exec();
	},
});