uniapp获取页面高度与元素高度简单示例

const { windowHeight } = uni.getSystemInfoSync(); // 获取页面高度

<view class="square_giant">
	<block v-for="item in giantList" :key="item.id">
		<view class="square_giant_item">
			<image :src="item.image || ''" mode=""></image>
			<text>{{ item.title || '' }}</text>
		</view>
	</block>
</view>

const query = uni.createSelectorQuery().in(this);
query.select('.square_giant').boundingClientRect(({ height }) => {
  console.log('square_giant的高度是：' + height + 'px');
}).exec();

<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>