修改导航栏为自定义
首先明确一下导航栏样式navigationStyle的属性：
default默认样式
custom自定义样式
打开app.json或者当前页面的json文件，设置navigationStyle导航栏样式为custom， 自定义导航栏，只保留右上角胶囊按钮。
"navigationStyle": "custom",
设置导航样式
在自定义页面的wxml和wxss页面中设置样式，
样式中要注意定位：
position: fixed;z-index: 1;
固定的距离顶端的距离在下面获取到通知栏高度以后，通过
style="top:{{BarHeight}}px"
动态绑定，BarHeight的获取如下。
修改通知栏的样式
此时滑动页面时通知栏会被覆盖，
在json文件中设置通知栏字体颜色：
"navigationBarTextStyle": "black"
在wxml页面最上面声明一个空的view，背景颜色设置为白色，宽度设置为100%，
高度通过获取系统通知栏高度动态设定。
<view class="blank" style="height: {{BarHeight}}px;"></view>
.blank{width: 100%;background-color: white;position: fixed;top: 0;z-index: 1;}
通过wx.getSystemInfoAsync方法获取通知栏高度：
data:{BarHeight: '',}
// 获取通知栏高度var that = this;wx.getSystemInfoAsync({success(res) {console.log(res.statusBarHeight)that.setData({BarHeight: res.statusBarHeight})}})
完整代码
json文件：
"navigationStyle": "custom","navigationBarTextStyle": "black"
wxml文件：
<!-- 空白view --><view class="blank" style="height: {{BarHeight}}px;"></view><!-- 标题 --><view class="title" style="top:{{BarHeight}}px"><view class="titleFont"><text>自定义导航栏</text></view></view>
wxss文件：
/* 空白view */.blank{width: 100%;background-color: white;position: fixed;top: 0;z-index: 1;}/* 标题 */.title {height: 55px;width: 100%;background-color: rgba(255, 255, 255, 0); z-index: 2;position: fixed;}.titleFont {width: 100%;height: 55px;display: flex;justify-content: center;align-items: center;}
js文件：
data:{BarHeight: '',}
onLoad() {var that = this;// 获取通知栏高度wx.getSystemInfoAsync({success(res) {console.log(res.statusBarHeight)that.setData({BarHeight: res.statusBarHeight})}})}
