uniapp 常用高度状态栏,导航栏,tab栏,底部安全高度

实际效果

使用

javascript 复制代码
//使用
let posConfig = this.getPosConfig(); // 传false返回值为 px大小
console.log(posConfig.safeBottomH)
javascript 复制代码
        // 入参 是否转换为rpx
        getPosConfig(toRpx = true) {
				const systemInfo = uni.getSystemInfoSync();
				// #ifdef MP
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				// #endif
				const posConfig = {
					statusBarH: systemInfo.statusBarHeight,//状态栏高度
					tabBarH: systemInfo.screenHeight - systemInfo.windowHeight,//底部tab高度
					safeBottomH: systemInfo.safeAreaInsets.bottom,//底部安全高度
					// #ifdef MP
					capsuleH: menuButtonInfo.height, //胶囊高度
					capsuleW: menuButtonInfo.width, //胶囊宽度
					capsuleGap: menuButtonInfo.top - systemInfo.statusBarHeight, // 胶囊到状态栏的间隔
					customBarH: menuButtonInfo.height + (menuButtonInfo.top - systemInfo.statusBarHeight) * 2, //自定义导航栏高度
					customBarW: menuButtonInfo.left, // 自定义导航栏宽度
					// #endif
				}
				if (toRpx) {
					const ratio = 750 / systemInfo.windowWidth;
					for (let key in posConfig) {
						posConfig[key] *= ratio;
					}
				}
				return posConfig;
}
相关推荐
最新资讯动态几秒前
DialogHub上线OpenHarmony开源社区,高效开发鸿蒙应用弹窗
前端
lvbb6610 分钟前
框架修改思路
前端·javascript·vue.js
qq_4560016511 分钟前
43、接口请求需要时间,导致页面初始加载时会出现空白,影响用户体验
javascript·vue.js·ux
树上有只程序猿12 分钟前
Java程序员需要掌握的技术
前端
从零开始学安卓15 分钟前
Kotlin(三) 协程
前端
try again!18 分钟前
rollup.js 和 webpack
开发语言·javascript·webpack
阿镇吃橙子19 分钟前
一些手写及业务场景处理问题汇总
前端·算法·面试
庸俗今天不摸鱼19 分钟前
【万字总结】前端全方位性能优化指南(九)——FSP(First Screen Paint)像素级分析、RUM+合成监控、Lighthouse CI
前端·性能优化
逆袭的小黄鸭20 分钟前
JavaScript:作用域与作用域链的底层逻辑
前端·javascript·面试