在自定义小程序导航栏时，右上角的胶囊（MenuButton）在不同机型测试，会发现很难适配。

实测中 不同的手机，胶囊高度不一样、状态栏高度不一样。与模拟器显示的情况是不一样的。

完全需要根据手机，动态的计算高度。

先看一些小程序顶部导航栏适配的情况

图一 某团     图二 某乎    图三 某东    图四 某拉

上图适配做的最好的是某东，但仔细看仍会有一点错位，但输入框的颜色，淡化了这种不和谐感。

为解决这个问题就要搞清楚原理

这是在没有设置自定义时的原生导航栏，我们发现整体的高度就是 （状态栏高度 + 导航栏高度）

而状态栏高度可以通过 wx.getSystemInfo(）获取，现在就只用解决导航栏高度了

观察发现，胶囊顶部高度距导航栏顶部高度的高度差 和 胶囊底部高度距导航栏底部高度的高度差，是一样的

也就是说 导航栏高度 = 胶囊高度 +（高度差）x  2

而胶囊信息可以通过 wx.getMenuButtonBoundingClientRect() 获取，现在就只用解决高度差了

wx.getMenuButtonBoundingClientRect() 中也返回了胶囊顶部距屏幕顶部距离的信息（top）

所以知 高度差 = 胶囊顶部距屏幕顶部距离 - 状态栏高度

用这两个API 我们可以得到如下的数据

导航栏整体高度 伪呆

menu = wx.getMenuButtonBoundingClientRect() 

system = wx.getSystemInfo

导航栏高度 = menu.statusBarHeight + menu.height + (menu.top - menu.statusBarHeight) * 2

到此我们就完美解决了导航栏高度的问题

而导航栏内容就是

内容标签的view高度等于menu.height并且垂直居中

效果

真机效果

最终效果

讲完了 上呆

注： 一般需将自定义导航栏单独出来为组件

app.js  呆

//app.js
App({
  globaldata: {},
  onLaunch: function() {
    //获取系统信息
    wx.getSystemInfo({
      success: res => {
        this.system = res
      }
    })
    //获取胶囊信息
    this.menu = wx.getMenuButtonBoundingClientRect()
    //打印数据
    console.log('系统信息', this.system)
    console.log('胶囊信息', this.menu)
  }
})

组件.js 呆

//获取应用实例
const app = getApp()

Component({
  
  properties: {
    //导航栏颜色
    navColor: {
      type: String,
      value: '#fff'
    }
  },

  
  data: {
    s: app.system.statusBarHeight, //状态栏高度
    n: (app.menu.top - app.system.statusBarHeight) * 2 + app.menu.height, //导航栏高度
    h: app.menu.height //胶囊高度
  }
})

组件.wxml 呆

  
  
    

      
      
      

      
      
        导航一
      
      
        导航二
      
      
        导航三
      

    
  

 

组件. wxss 呆

.nav_box {
  position: fixed;
  width: 100%;
  font-size: 15px;
  z-index: 999;
}

.navBar {
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.content {
  width: 100%;
  display: flex;
  align-items: center;
  background: green;
}

组件使用页面.json 呆

{
  "navigationStyle": "custom", //设置自定义导航
  "usingComponents": {
    "navBar": "../../组件/navBar/navBar" //自己的路径
  }
}