微信小程序自定义导航栏 胶囊菜单按钮高度适配

onLoad() {
//  自定义导航栏
//    s: app.system.statusBarHeight, //状态栏高度
//    n: (app.menu.top - app.system.statusBarHeight) * 2 + app.menu.height, //导航栏高度
//   h: app.menu.height //胶囊高度
    //获取系统信息
    wx.getSystemInfo({
      success: res => {
        this.system = res
      }
    })
//获取胶囊信息
    this.menu = wx.getMenuButtonBoundingClientRect()
//    自定义导航栏的高度  状态栏高度 + 导航栏高度
    this.BarHeight = this.system.statusBarHeight+(this.menu.top - this.system.statusBarHeight) * 2 + this.menu.height
//打印数据
    console.log('系统信息', this.system)
    console.log('胶囊信息', this.menu)
//    以上信息
}

这是在没有设置自定义时的原生导航栏，我们发现整体的高度就是 （状态栏高度 + 导航栏高度）
而状态栏高度可以通过 wx.getSystemInfo(）获取，现在就只用解决导航栏高度了
观察发现，胶囊顶部高度距导航栏顶部高度的高度差 和 胶囊底部高度距导航栏底部高度的高度差，是一样的
也就是说 导航栏高度 = 胶囊高度 +（高度差）x  2
而胶囊信息可以通过 wx.getMenuButtonBoundingClientRect() 获取，现在就只用解决高度差了
wx.getMenuButtonBoundingClientRect() 中也返回了胶囊顶部距屏幕顶部距离的信息（top）
所以知 高度差 = 胶囊顶部距屏幕顶部距离 - 状态栏高度

在对应的页面main.json写上去掉系统导航栏，自定义导航如下设置
 "navigationStyle": "custom",