實(shí)現(xiàn)方式:
1.在小程序的app.json中或者是頁(yè)面的page.json中添加如下代碼铅歼,此代碼為該小程序或頁(yè)面使用自定義頭部:
"navigationStyle": "custom"
2.在app.js中根據(jù)wx.getSystemInfo()方法獲取一下設(shè)備情況并將狀態(tài)欄高度設(shè)置為全局變量配名,因?yàn)椴煌脑O(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
上述三個(gè)參數(shù)對(duì)應(yīng)到頁(yè)面上的位置高度如下圖:
示例圖片
紅色:設(shè)備狀態(tài)欄高度;
綠色(含紅色部分):膠囊距離上邊界坐標(biāo);
粉色(含紅色及綠色部分):膠囊距離下邊界坐標(biāo);
目前對(duì)自定義頭部高度的設(shè)置使用中苇羡,用下邊界+上邊界-狀態(tài)欄高度(即menuInfoBottom +menuInfoTop -headHeight )是一個(gè)比較合適的頭部高度,文字內(nèi)容的行高為下邊界+上邊界(即menuInfoBottom +menuInfoTop)鼻弧。如果業(yè)務(wù)需求不同设江,也可根據(jù)上述三個(gè)參數(shù)進(jìn)行調(diào)整使用。