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