小程序自定义导航栏高度相关变量说明

在小程序自定义导航组件时，关于高度的一些变量的相关说明，官方文档上说的很简略，于是在此说明一下。 高度变量的参考基准是和设备的操作系统有关系的。 先说一下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的值

因此，高度取值为：