在自定義小程序?qū)Ш綑跁r(shí)，右上角的膠囊（MenuButton）在不同機(jī)型測(cè)試，會(huì)發(fā)現(xiàn)很難適配。

實(shí)測(cè)中 不同的手機(jī)，膠囊高度不一樣、狀態(tài)欄高度不一樣。與模擬器顯示的情況是不一樣的。

完全需要根據(jù)手機(jī)，動(dòng)態(tài)的計(jì)算高度。

先看一些小程序頂部導(dǎo)航欄適配的情況

圖一 某團(tuán) 圖二 某乎 圖三 某東 圖四 某拉

上圖適配做的最好的是某東，但仔細(xì)看仍會(huì)有一點(diǎn)錯(cuò)位，但輸入框的顏色，淡化了這種不和諧感。

---

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

這是在沒(méi)有設(shè)置自定義時(shí)的原生導(dǎo)航欄，我們發(fā)現(xiàn)整體的高度就是 （狀態(tài)欄高度 + 導(dǎo)航欄高度）

而狀態(tài)欄高度可以通過(guò) wx.getSystemInfo(）獲取，現(xiàn)在就只用解決導(dǎo)航欄高度了

觀察發(fā)現(xiàn)，膠囊頂部高度距導(dǎo)航欄頂部高度的高度差 和 膠囊底部高度距導(dǎo)航欄底部高度的高度差，是一樣的

也就是說(shuō) 導(dǎo)航欄高度 = 膠囊高度 +（高度差）x 2

而膠囊信息可以通過(guò) wx.getMenuButtonBoundingClientRect() 獲取，現(xiàn)在就只用解決高度差了

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

所以知 高度差 = 膠囊頂部距屏幕頂部距離 - 狀態(tài)欄高度

---

用這兩個(gè)API 我們可以得到如下的數(shù)據(jù)

導(dǎo)航欄整體高度 偽呆🐎

menu = wx.getMenuButtonBoundingClientRect()

system = wx.getSystemInfo

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

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

而導(dǎo)航欄內(nèi)容就是

內(nèi)容標(biāo)簽的view高度等于menu.height并且垂直居中

---

效果

真機(jī)效果

最終效果

講完了 上呆🐎

---

注： 一般需將自定義導(dǎo)航欄單獨(dú)出來(lái)為組件

app.js 呆🐎

//app.js
App({
  globalData: {},
 >//獲取應(yīng)用實(shí)例
const app = getApp()

Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    //導(dǎo)航欄顏色
    navColor: {
      type: String,
      value: '#fff'
    }
  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    s: app.system.statusBarHeight, //狀態(tài)欄高度
    n: (app.menu.top - app.system.statusBarHeight) * 2 + app.menu.height, //導(dǎo)航欄高度
    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'>

      <!-- 導(dǎo)航自定義內(nèi)容 -->
      <!-- 1. 插槽 可在使用頁(yè)面插入所需內(nèi)容 -->
      <slot></slot>

      <!-- 2. 選擇渲染 可在js頁(yè)面 設(shè)置渲染type屬性 不同場(chǎng)景傳不同值 -->
      <block wx:if='{{type == 0}}'>
        導(dǎo)航一
      </block>
      <block wx:if='{{type == 1}}'>
        導(dǎo)航二
      </block>
      <block  wx:else>
        導(dǎo)航三
      </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;
}

組件使用頁(yè)面.json 呆🐎

{
  "navigationStyle": "custom", //設(shè)置自定義導(dǎo)航
  "usingComponents": {
    "navBar": "../../組件/navBar/navBar" //自己的路徑
  }
}