小程序自定義導航欄高度相關變量說明

在小程序自定義導航組件時，關於高度的一些變量的相關說明，官方文檔上說的很簡略，因而在此說明一下。 高度變量的參考基準是和設備的操做系統有關係的。 先說一下iOS系統下的變量，以下圖所示： navigation.png

• 小程序api getMenuButtonBoundingClientRect 中的座標原點在iOS上是指手機屏幕左上角的點，
• getMenuButtonBoundingClientRect.top指的是橫座標，
• getMenuButtonBoundingClientRect.bottom指的是頂部導航組件的下邊框座標，
• wx.getSystemInfo 中的 statusBarHeight 則沒有直接在iOS系統中體現，而相應的，標題欄（導航欄去掉狀態欄）高度爲 getMenuButtonBoundingClientRect.bottom - statusBarHeight

Android系統中的變量則相對和文檔中的描述比較相近，以下圖所示： android.png

• 小程序api getMenuButtonBoundingClientRect 中的座標原點在Android上是指手機狀態欄左下角的點，
• getMenuButtonBoundingClientRect.top指的是手機右上角膠囊按鈕上邊框的座標，
• getMenuButtonBoundingClientRect.bottom指的是手機右上角膠囊按鈕的下邊框座標，
• wx.getSystemInfo 中的 statusBarHeight 則是指狀態欄的高度，
• 右上角膠囊按鈕的下邊框到頂部導航組件的下邊框的距離即爲getMenuButtonBoundingClientRect.top的值

所以，高度取值爲：

高度說明	iOS	Android
導航組件高度	getMenuButtonBoundingClientRect.bottom	getMenuButtonBoundingClientRect.bottom + getMenuButtonBoundingClientRect.top + statusBarHeight
標題欄（導航欄去掉狀態欄）高度	getMenuButtonBoundingClientRect.bottom - statusBarHeight	getMenuButtonBoundingClientRect.bottom + getMenuButtonBoundingClientRect.top