微信小程序自定义顶部导航栏（兼容适配所有机型） - 好文

在微信小程序中，自定义导航栏的颜色可以在app.json. window里面添加navigationBarBackgroundColor属性。

但是颜色只能为十六进制颜色码，不能使用rgb，或者rgba.。

为了满足更多用户的需求，微信官方给出了一个navigationStyle属性。

官方文档：navigationStyle 导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮)。

在app.json window 增加 navigationStyle:custom ，顶部导航栏就会消失，保留右上角胶囊状的按钮，如下图所示。

Q：如果改变胶囊体颜色？

A：胶囊体目前只支持黑色和白色两种颜色在app.josn window 加上 "navigationBarTextStyle":"white/black"

注：如果自定义导航栏，页面自带的返回按钮也会消失，需要用代码编写！！！！

Q：如何兼容适配所有机型，包括刘海屏？

A：使用 wx.getSystemInfoSync()['statusBarHeight'] 则能获取到顶部状态栏的高度，单位为px.

简单示例：
在app.js里面 App({ globalData: {
statusBarHeight:wx.getSystemInfoSync()['statusBarHeight'] } }) WXML
自定义顶部状态栏div结构 <view class="custom flex_center"
style="padding-top:{{statusBarHeight}}px"> <text>demo</text> </view> <view
class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view> app.css
全局css中设置样式 .custom{ position: fixed; width: 100%; top: 0; left: 0; height:
45px; background: #2C5CFF; z-index: 999; } .custom text{ color: #fff;
font-size: 34rpx; font-weight: 500; max-width: 280rpx; } .empty_custom{ height:
45px; width: 100%; } 在index.js中取出statusBarHeight值 Page({ data:{
statusBarHeight: app.globalData.statusBarHeight } })

热门工具换一换