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

相关推荐
excel19 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着19 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友20 小时前
什么是API签名?
前端·后端·安全
会豪1 天前
Electron-Vite (一)快速构建桌面应用
前端
中微子1 天前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶1 天前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子1 天前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_1 天前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23331 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin1 天前
TypeScript设计模式:适配器模式
前端·后端·node.js