具體實(shí)現(xiàn)步驟及使用方法
1.在
xxx.json文件里把"navigationStyle"設(shè)置為"custom"
image.png
2.計(jì)算相關(guān)值
因?yàn)樵诓煌氖謾C(jī)型號(hào)頭部那條欄目高度可能不一致瓷们，所以為了我們適配更多型號(hào)，我們需要計(jì)算3個(gè)值：
如下圖：
735803-20190820121840119-1563108564.jpg
1. 整個(gè)導(dǎo)航欄的高度
2. 膠囊按鈕與頂部的距離披坏；
3. 膠囊按鈕與右側(cè)的距離雾叭。
小程序可以通過 wx.getMenuButtonBoundingClientRect() 獲取膠囊按鈕的信息 和 wx.getSystemInfo()獲取設(shè)備信息菲驴。
如下圖：
735803-20190820122723905-2125027512 (1).png
通過這些信息我們可以計(jì)算出上面說的3個(gè)值：
1. 整個(gè)導(dǎo)航欄高度 = statausBarHeight + height + (top-statausBarHeight )*2；
2. 膠囊按鈕與頂部的距離 = top；
3. 膠囊按鈕與右側(cè)的距離 = windowWidth - right夺刑。
app.js代碼如下
App({
onLaunch: function () {
let menuButtonObject = wx.getMenuButtonBoundingClientRect();
wx.getSystemInfo({
success: res => {
let statusBarHeight = res.statusBarHeight,
navTop = menuButtonObject.top,//膠囊按鈕與頂部的距離
navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2;//導(dǎo)航高度
this.globalData.navHeight = navHeight;
this.globalData.navTop = navTop;
this.globalData.windowHeight = res.windowHeight;
},
fail(err) {
console.log(err);
}
})
}
})
借鑒于：
作者：前端[色色]
鏈接：https://www.cnblogs.com/sese/p/9761713.html
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)分别，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處遍愿。
