小程序自定义导航栏

具体实现步骤及使用方法

1.在 xxx.json 文件里把"navigationStyle" 设置为 "custom"

image.png

2.计算相关值

因为在不同的手机型号头部那条栏目高度可能不一致，所以为了我们适配更多型号，我们需要计算3个值：
如下图：

735803-20190820121840119-1563108564.jpg

1. 整个导航栏的高度
2. 胶囊按钮与顶部的距离；
3. 胶囊按钮与右侧的距离。

小程序可以通过 wx.getMenuButtonBoundingClientRect() 获取胶囊按钮的信息 和 wx.getSystemInfo()获取设备信息。
如下图：

735803-20190820122723905-2125027512 (1).png

通过这些信息我们可以计算出上面说的3个值：

1. 整个导航栏高度 = statausBarHeight + height + (top-statausBarHeight )*2；
2. 胶囊按钮与顶部的距离 = top；
3. 胶囊按钮与右侧的距离 = 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;//导航高度
        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
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。