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

相关推荐
「、皓子~28 分钟前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了30 分钟前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_32 分钟前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
奋飛1 小时前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟1 小时前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor1 小时前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js