uniapp如何自定义顶部导航？

uniapp很多情况下并不想要系统自带导航，如果自定义导航呢？

第一步

首先在 page.json 文件添加如下代码，意思是自定义导航

"navigationStyle": "custom"

第二步

极端导航栏高度

onLoad() {
  let res = uni.getSystemInfoSync();
  let menu = wx.getMenuButtonBoundingClientRect();
  this.statusBarHeight = (menu.top - res.statusBarHeight) * 2 + menu.height + res.statusBarHeight;
  if (res.model.indexOf('iPhone') > -1) {
    this.statusBarHeight += 4
  }            
}

第三步

胶囊高度计算

getSystemStatus() {
  setTimeout(() => {
    uni.getSystemInfo({
    success: function(res) {
      let menu = wx.getMenuButtonBoundingClientRect(); //获取获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。（top表示上边框到手机顶部的距离 bottom是下边框到手机顶部的距离）
      console.log('下至'+menu.bottom,'上至'+menu.top,'这个？'+res.statusBarHeight)
      console.log(menu.bottom + menu.top - res.statusBarHeight,'看下参数')
      }
    });
  })
},