實現(xiàn)方式：
1.在小程序的app.json中或者是頁面的page.json中添加如下代碼，此代碼為該小程序或頁面使用自定義頭部：
"navigationStyle": "custom"
2.在app.js中根據(jù)wx.getSystemInfo()方法獲取一下設(shè)備情況并將狀態(tài)欄高度設(shè)置為全局變量，因為不同的設(shè)備狀態(tài)欄高度可不同（返回的狀態(tài)欄高度單位為px）。獲取高度代碼如下:
//獲取手機(jī)設(shè)備情況
wx.getSystemInfo({
success: (res) => {
this.globalData.headHeight = res.statusBarHeight
}
})
3.根據(jù)wx.getMenuButtonBoundingClientRect()方法獲取一下獲取菜單按鈕（右上角膠囊按鈕）的布局位置信息；
// 獲取膠囊坐標(biāo)位置
const res = wx.getMenuButtonBoundingClientRect()
this.globalData.menuInfoTop = res.top
this.globalData.menuInfoBottom = res.bottom
上述三個參數(shù)對應(yīng)到頁面上的位置高度如下圖：
示例圖片
紅色：設(shè)備狀態(tài)欄高度；
綠色（含紅色部分）：膠囊距離上邊界坐標(biāo)；
粉色（含紅色及綠色部分）：膠囊距離下邊界坐標(biāo)；
目前對自定義頭部高度的設(shè)置使用中，用下邊界+上邊界-狀態(tài)欄高度（即menuInfoBottom +menuInfoTop -headHeight ）是一個比較合適的頭部高度，文字內(nèi)容的行高為下邊界+上邊界（即menuInfoBottom +menuInfoTop）。如果業(yè)務(wù)需求不同，也可根據(jù)上述三個參數(shù)進(jìn)行調(diào)整使用。
