uniapp 自定义页面顶部导航栏

本文主要是介绍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));},

这篇关于uniapp 自定义页面顶部导航栏的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---