在微信小程序中怀骤，自定義導(dǎo)航欄的顏色 可以在app.json. window里面添加navigationBarBackgroundColor屬性期丰。
但是顏色只能為十六進(jìn)制顏色碼柔逼，不能使用rgb犯犁，或者rgba.。
為了滿足更多用戶的需求逮光，微信官方給出了一個(gè)navigationStyle屬性代箭。
官方文檔：navigationStyle 導(dǎo)航欄樣式，僅支持 default/custom涕刚。custom 模式可自定義導(dǎo)航欄，只保留右上角膠囊狀的按鈕)乙帮。
在app.json window 增加 navigationStyle:custom 杜漠，頂部導(dǎo)航欄就會(huì)消失，保留右上角膠囊狀的按鈕察净，如下圖所示驾茴。
image.png
Q：如果改變膠囊體顏色？
A：膠囊體目前只支持黑色和白色兩種顏色 在app.josn window 加上 "navigationBarTextStyle":"white/black"
注：如果自定義導(dǎo)航欄氢卡，頁(yè)面自帶的返回按鈕也會(huì)消失锈至，需要用代碼編寫！Ｒ肭亍Ｏ考瘛击碗！
Q：如何兼容適配所有機(jī)型，包括劉海屏们拙？
A：使用 wx.getSystemInfoSync()['statusBarHeight'] 則能獲取到頂部狀態(tài)欄的高度稍途，單位為px.
簡(jiǎn)單示例：
在app.js里面
App({
globalData: {
statusBarHeight:wx.getSystemInfoSync()['statusBarHeight']
}
})
WXML 自定義頂部狀態(tài)欄div結(jié)構(gòu)
<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中設(shè)置樣式
.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
}
})
