uniapp 自定义页面顶部导航栏

效果图

1.移除原生导航栏

{
	"path": "pages/common/homePage/homePage",
	"style": {
	    "navigationBarTitleText": "",
		"navigationStyle": "custom"
				
	}
}

2.获取不同手机顶部自带 电量高度、信号、时间导航栏高度  和   状态栏和胶囊按钮的间隙高度

如图：红色背景色为手机顶部自带高度，黄色背景为状态栏和胶囊按钮间隙高度

 

<view class="" :style="{height:statusBarHeight+'px'}" style="background-color: red;" ></view>
<view style="display: flex;flex-direction: row;align-items: center;width:710rpx; background-color: yellow;" :style="{height:navBarHeight+'px'}"></view>
			

onShow() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.navBarHeight = (this.menuButtonInfo.bottom - this.statusBarHeight) +                 
            (this.menuButtonInfo.top - this.statusBarHeight)
			console.log("顶部电量高度");
			console.log(uni.getSystemInfoSync().statusBarHeight);
			console.log("胶囊数据宽高数据");
			console.log(uni.getMenuButtonBoundingClientRect());
			console.log("状态栏与胶囊按钮中的空隙");
			console.log((this.menuButtonInfo.bottom - this.statusBarHeight) + 
            (this.menuButtonInfo.top - this.statusBarHeight));
		},