微信小程序自定义头部

实现方式：

1.在小程序的app.json中或者是页面的page.json中添加如下代码，此代码为该小程序或页面使用自定义头部：

"navigationStyle": "custom"

2.在app.js中根据wx.getSystemInfo()方法获取一下设备情况并将状态栏高度设置为全局变量，因为不同的设备状态栏高度可不同（返回的状态栏高度单位为px）。获取高度代码如下:

//获取手机设备情况
wx.getSystemInfo({
      success: (res) => {
        this.globalData.headHeight = res.statusBarHeight
      }
    })

3.根据wx.getMenuButtonBoundingClientRect()方法获取一下获取菜单按钮（右上角胶囊按钮）的布局位置信息；

// 获取胶囊坐标位置
    const res = wx.getMenuButtonBoundingClientRect()
    this.globalData.menuInfoTop = res.top
    this.globalData.menuInfoBottom = res.bottom

上述三个参数对应到页面上的位置高度如下图：

示例图片

红色：设备状态栏高度；
绿色（含红色部分）：胶囊距离上边界坐标；
粉色（含红色及绿色部分）：胶囊距离下边界坐标；

目前对自定义头部高度的设置使用中，用下边界+上边界-状态栏高度（即menuInfoBottom +menuInfoTop -headHeight ）是一个比较合适的头部高度，文字内容的行高为下边界+上边界（即menuInfoBottom +menuInfoTop）。如果业务需求不同，也可根据上述三个参数进行调整使用。

注意：iOS/Android客户端7.0.0以下版本，navigationStyle只在app.json中生效。