具體實現(xiàn)步驟及使用方法

1.在 xxx.json 文件里把"navigationStyle" 設(shè)置為 "custom"

image.png

2.計算相關(guān)值

因為在不同的手機型號頭部那條欄目高度可能不一致，所以為了我們適配更多型號，我們需要計算3個值：
如下圖：

735803-20190820121840119-1563108564.jpg

1. 整個導(dǎo)航欄的高度
2. 膠囊按鈕與頂部的距離；
3. 膠囊按鈕與右側(cè)的距離。

小程序可以通過 wx.getMenuButtonBoundingClientRect() 獲取膠囊按鈕的信息 和 wx.getSystemInfo()獲取設(shè)備信息。
如下圖：

735803-20190820122723905-2125027512 (1).png

通過這些信息我們可以計算出上面說的3個值：

1. 整個導(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)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。