uniapp自定义首页导航栏 获取状态栏和胶囊高度

运行结果样式(首页导航栏根据手机状态栏高度展示位置不一样)：

相关代码：

<template>
	<image class="main_bg" src="@/static/img/bg/home_list_bg.png"></image>
	<view :style="{marginTop:statusBarHeight,height:titleBarHeight,lineHeight:titleBarHeight}"
			class="c33 bold6 fs19 home_title">首页</view>
		<view class="px15 mt20">
</template>
data() {
		return {
			// 状态栏（顶部）高度
			statusBarHeight: 0,
			// 导航栏（胶囊）高度
			titleBarHeight: 0,
			// 总高度
			totalHeight: '',
		};
},
created() {
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
			uni.getSystemInfo({ //获取系统信息
				success: res => {
					//导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
					let navHeight = menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight) * 2;
					// 导航栏（胶囊）高度
					this.titleBarHeight = Number(parseInt(navHeight / (uni.upx2px(100) / 100))) + 'rpx';
					//  状态栏（顶部）高度
					this.statusBarHeight = Number(parseInt(res.statusBarHeight / (uni.upx2px(100) / 100))) +
						'rpx';
					console.log(this.statusBarHeight, this.titleBarHeight, '顶部高度，药丸高度');
					let total = Number(navHeight + res.statusBarHeight) / (uni.upx2px(100) / 100);
					// rpx内置转换 = xxx(px)/(uni.upx2px(100) / 100)
					this.totalHeight = Number(parseInt(total)) + 'rpx';
				},
				fail(err) {
					console.log(err);
				}
			})
			// #endif
},

获取状态栏和胶囊高度 参考链接文档：uniapp 小程序自定义导航栏计算状态栏（顶部）与导航栏（胶囊）高度_uniapp 获取自定义u-navbar的高度_九分库的博客-CSDN博客