uniapp动态计算并设置元素高度

<template>
	<view>
		<scroll-view id="sv-box" :scroll-y="true" :style="{height:navHeight+'px'}"></scroll-view>

		<view id="btn-box">
			<button>取消</button>
			<button>确认</button>
		</view>
	</view>
</template>

export default {
	name: "demo",
	components: {},
	props: {},
	data() {
		return {
			pH: 0, //窗口高度
			navHeight: 0, //元素的所需高度
		}
	},
	methods: {
		init() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.pH = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
					let titleH = ''
					uni.createSelectorQuery().select("#sv-box").boundingClientRect(data => {
						titleH = that.pH - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
					}).exec()

					uni.createSelectorQuery().select("#btn-box").boundingClientRect(data => {
						titleH -= data.height //再减去底部元素高度（data.height）
					}).exec()
					
					that.navHeight = titleH
				}
			})
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

注意：如果做为popup组件使用，不要在mounted里调用计算方法，会出现高度计算错误。因为当mounted执行时，popup中的内容还未渲染生成，导致高度按全屏高度计算。