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

原创已于 2024-09-26 20:27:13 修改 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端 #javascript

于 2024-09-26 19:58:29 首次发布

实际效果

使用

//使用
let posConfig = this.getPosConfig(); // 传false返回值为 px大小
console.log(posConfig.safeBottomH)

        // 入参 是否转换为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;
}