uniapp获取元素的宽度、高度

效果图

安卓APP实测可用....

完整代码

重要：mounted( ){ }代表页面已被渲染

<template>
	<view>
		
		<view class="xxoo" style="height: 650rpx; border: 3rpx orange solid; margin: 30rpx; background-color: #C0C0C0; padding: 30rpx;">
			<view>
				元素class="xxoo"
			</view>
			<view>
				获取当前元素的实时高度为：{{heightEle}}
			</view>
			<view>
				推荐无广告的百度首页 https://baidu.rudon.cn
			</view>
			<view>
				推荐无广告的手机浏览器 https://viayoo.com/zh-cn/
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				heightEle: 0
			}
		},
		methods: {
			
		},
		mounted() {
			uni.createSelectorQuery().in(this).select(".xxoo").boundingClientRect(data => {
			  console.log(JSON.stringify(data))
			  // {"id":"","dataset":{},"left":12,"right":308,"top":12,"bottom":315,"width":296,"height":303}
			  this.heightEle = data.height
			}).exec()
		},
		onLoad () {
			
		}
	}
</script>

<style>
	
</style>

More

App、页面生命周期函数

https://uniapp.dcloud.io/api/lifecycle.html#页面生命周期https://uniapp.dcloud.io/collocation/App.html#applifecycle

官网的获取元素高度方法

uni.createSelectorQuery() | uni-app官网https://uniapp.dcloud.io/api/ui/nodes-info.html#nodesref

手机甄姬❤测试