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().statusBarHeightthis.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));},