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

	
		
		
			取消
			确认
		
	

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

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