在自定義小程序導航欄時，右上角的膠囊（MenuButton）在不同機型測試，會發現很難适配。

實測中(zhōng) 不同的手機，膠囊高度不一樣、狀态欄高度不一樣。與模拟器(qì)顯示的情況是不一樣的。

完全需要根據手機，動(dòng)态的計算高度。

先看一些小程序頂部導航欄适配的情況

圖一 某團 圖二 某乎 圖三 某東 圖四 某拉

上圖适配做的最好的是某東，但仔細看仍會有一點錯位，但輸入框的顔色，淡化了這種不和(hé)諧感。

---

為解決這個(gè)問(wèn)題就要搞清楚原理

這是在沒有設置自定義時的原生導航欄，我們發現整體的高度就是 （狀态欄高度 + 導航欄高度）

而狀态欄高度可(kě)以通(tōng)過 wx.getSystemInfo(）獲取，現在就隻用解決導航欄高度了

觀察發現，膠囊頂部高度距導航欄頂部高度的高度差 和(hé) 膠囊底部高度距導航欄底部高度的高度差，是一樣的

也就是說 導航欄高度 = 膠囊高度 +（高度差）x 2

而膠囊信息可(kě)以通(tōng)過 wx.getMenuButtonBoundingClientRect() 獲取，現在就隻用解決高度差了

wx.getMenuButtonBoundingClientRect() 中(zhōng)也返回了膠囊頂部距屏幕頂部距離(lí)的信息（top）

所以知 高度差 = 膠囊頂部距屏幕頂部距離(lí) - 狀态欄高度

---

用這兩個(gè)API 我們可(kě)以得到如(rú)下(xià)的數據

導航欄整體高度 僞呆🐎

menu = wx.getMenuButtonBoundingClientRect()

system = wx.getSystemInfo

導航欄高度 = menu.statusBarHeight + menu.height + (menu.top - menu.statusBarHeight) * 2

到此我們就完美解決了導航欄高度的問(wèn)題

而導航欄内容就是

内容标簽的view高度等于menu.height并且垂直居中(zhōng)

---

效果

真機效果

最終效果

講完了 上呆🐎

---

注： 一般需将自定義導航欄單獨出來為組件

app.js 呆🐎

//app.js
App({
  globalData: {},
 >//獲取應用實例
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 呆🐎

<cover-view class='nav_box' style='background:{{navColor}}'>
  <cover-view style='height:{{s}}px' />
  <cover-view class='navBar' style='height:{{n}}px'>
    <cover-view class='content' style='height:{{h}}px'>

      <!-- 導航自定義内容 -->
      <!-- 1. 插槽 可(kě)在使用頁面插入所需内容 -->
      <slot></slot>

      <!-- 2. 選擇渲染 可(kě)在js頁面 設置渲染type屬性 不同場景傳不同值 -->
      <block wx:if='{{type == 0}}'>
        導航一
      </block>
      <block wx:if='{{type == 1}}'>
        導航二
      </block>
      <block  wx:else>
        導航三
      </block>

    </cover-view>
  </cover-view>
</cover-view>
<view style='height:{{s+n}}px' /> <!-- 注：占位用 -->

組件. 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" //自己的路(lù)徑
  }
}