微信小程序自定义顶部导航栏样式

navigationBar相信大家都不陌生把？今天我们就来说说自定义navigationBar，把它改变成我们想要的样子。
思路：隐藏原生样式，获取胶囊按钮、状态栏相关数据以供后续计算，根据不同机型计算出该机型的导航栏高度，进行适配
编写新的导航栏，引用到页面。
1、自定义导航栏
navigation-bar标签

<page-meta>
  <navigation-bar
    title="勾股OA"
    font-color="#fff"
    background-color="#4A87F7"
  />
</page-meta>

2、动态修改导航栏名称

wx.setNavigationBarTitle({
  title: '勾股OA'
})

3、隐藏原生的navigationBar，自定义导航，需要设置头部导航栏的页面中通过json配置 “navigationStyle”: “custom” ，自定义导航栏，只保留右上角的胶囊按钮。
index.json文件：

"windows":{
  "navigationStyle": "custom"
}

index.js文件：

Page({
  data: {
    statusBarHeight: 0,
    isBack: false
  },
  onLoad(ops) {
    wx.getSystemInfo({
      success: (result) => {
        this.setData({statusBarHeight: result.statusBarHeight})
      }
    })
    if(ops.isBack) {
      this.setData({isBack})
    }
  })
})

index.wxml文件：

 <view class="statusBarBox">
  <view  style="height:{{statusBarHeight + 44}}px;">
    <navigator class="back" open-type="navigateBack" wx:if="{{isback}}"></navigator>
    <navigator class="home" open-type="reLaunch" url="/pages/index/index" wx:else>
      <image class="image" mode="aspectFill" src=""></image>
    </navigator>
    <text class="title">勾股OA</text>
  </view>
</view>

注意一下：导航栏高度一般都是状态栏的高度+44