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

javascript 复制代码
<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中的内容还未渲染生成,导致高度按全屏高度计算。

相关推荐
开开心心就好27 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享28 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
为风而战1 小时前
uni-app X APP在线升级 解决【uni-upgrade-center-app】未配置uni-upgrade-center 问题
uni-app
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
雪碧聊技术6 小时前
uniapp如何创建并使用组件?组件通过Props如何进行数据传递?
uni-app·创建组件·使用组件·props数据传递
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
@Dream_Chaser6 小时前
uniapp页面间通信
uni-app
Liudef066 小时前
儿童趣味记忆配对游戏
css·游戏·css3