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;
}
相关推荐
JosieBook1 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
LBJ辉1 小时前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea8 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴9 小时前
Mix
前端·webgl
代码续发9 小时前
前端组件梳理
前端
试图让你心动10 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码10 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记10 小时前
sass中@mixin与 @include
前端·sass
源码_V_saaskw10 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
陈琦鹏10 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket