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

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