阅读量:3
<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中的内容还未渲染生成，导致高度按全屏高度计算。
