uniapp怎么获取元素高度，获取元素节点信息，获取界面剩余高度_uniapp 获取元素高度

一、在uniapp项目开发的过程中，常常需要获取元素的高度信息，来更容易的实现元素的布局控制，使用场景：列入动态的计算容器的高度，设置组件的最小高度等等

在获取元素节点信息中，通常有两种情况：①获取单个 ②获取v-for循环元素的节点信息，话不多说，直接上代码

注意：需要在onReady（）之后获取，否则无效

①、使用uni.createSelectorQuery()来获取节点信息

<template>
	<view>
		<view class="box"></view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
 
			}
		},
		onReady() {
			//.box获取class为box的元素，如果使用的id= 'box' 则使用'#box'
			uni.createSelectorQuery().select('.box').boundingClientRect(data => {
				console.log(data)
			}).exec()
		},
		methods: {
 
		}
	}
</script>
<style>
	.box {
		height: 100px;
		width: 200px;
		background-color: pink;
	}
</style>

②、通过selectAll（）来实现获取循环元素的节点信息

<template>
	<view>
		<view class="box" v-for="item in 4"></view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
 
			}
		},
		onReady() {
			//.box获取class为box的元素，如果使用的id= 'box' 则使用'#box'
			uni.createSelectorQuery().selectAll('.box').boundingClientRect(data => {
				console.log(data)
			}).exec()
		},
		methods: {
 
		}
	}
</script>
<style>
	.box {
		height: 100px;
		width: 200px;
		background-color: pink;
	}
</style>

二、 同时在开发中常常还会遇到需要计算页面剩余高度，用于设置其他元素的高度

实现原理：首先获取设备高度（uni.getSystemInfo（））减去其他容器的高度，则为页面剩余高度

<template>
	<view>
		<view class="box"></view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
 
			}
		},
		onReady() {
			uni.getSystemInfo({
				success(res) {
					let screenHeight = res.screenHeight
					let height = ''
					//.box获取class为box的元素，如果使用的id= 'box' 则使用'#box'
					uni.createSelectorQuery().select('.box').boundingClientRect(data => {
						height = screenHeight - data.height
						console.log(height)
					}).exec()
				}
			})
		},
		methods: {
 
		}
	}
</script>
<style>
	.box {
		height: 100px;
		width: 200px;
		background-color: pink;
	}
</style>