uni.createSelectorQuery()获取节点高度不准确

苍风的心上人

于 2024-07-15 15:02:41 发布

阅读量122

点赞数 1

文章标签：前端 javascript 开发语言 uniapp

本文链接：https://blog.csdn.net/qq_46131497/article/details/140439002

版权

这是因为uni.createSelectorQuery().boundingClientRect()是异步获取元素节点高度，当请求的数据过多或者过长时无法获取准确的高度

目前我解决的方法是加了个超时定时器

onReady() {
           // 这个是我需要动态改变高度和距离顶部的高度的盒子 
			let div = document.querySelector(".center-class");
			let that = this
			// 获取屏幕的高度
			uni.getSystemInfo({
				success(res) {
					setTimeout(() => {
						// 屏幕高度
						let screenHeight = res.screenHeight
						// 顶部高度
						uni.createSelectorQuery().select('.top-class').boundingClientRect(data => {
							that.topHeight = data.height
							console.log(data)
						}).exec()

						// 底部
						uni.createSelectorQuery().select('.bottom-class').boundingClientRect(data => {
							let bottomHeight = data.height
							that.centerHeight =
								`calc(100% - ${that.topHeight}px - ${bottomHeight}px)`
							console.log(that.topHeight, bottomHeight)
							// 修改盒子的样式
							that.$nextTick(() => {
								div.style.height = that.centerHeight
								div.style.top = (that.topHeight - 10) + "px" 
							})
						}).exec()
					}, 10)

				}
			})

		},