【微信小程序】自定义导航栏

大部分情况下我们都是使用微信官方自带的 navigationBar 配置 ，但有时候我们需要在导航栏集成搜索框、自定义背景图、返回首页按钮等。

思路

• 隐藏官方导航栏
• 获取胶囊按钮、状态栏相关数据以供后续计算
• 根据不同机型计算导航栏高度
• 编写新的导航栏
• 页面引用自定义导航

一、隐藏官方导航栏

隐藏导航栏可以全局配置，也可以单独页面配置，具体根据业务需求来。

{
   
    "path" : "pages/public/login",
    "style": {
   
        "navigationBarTitleText": "",
        "navigationStyle": "custom",
        "app-plus": {
   
            "titleNView": false
        }
    }
}

二、计算相关值

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

如下图：

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

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

如下图：

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

1、整个导航栏高度 = statausBarHeight + height + (top-statausBarHeight )2；
注：状态栏到胶囊的间距 = 胶囊到下边界距离。所以这里需要2
(或： 导航栏高度 = bottom + ( top- statausBarHeight ) )

2、胶囊按钮与顶部的距离 = top；

3、胶囊按钮与右侧的距离 = windowWidth - right。

关于第1步中，为啥要乘以2的原因，请看灵魂画手般的我画的图纸：

实例

app.js设置

一般情况下，我们需要在运用启动的初始化生命周期钩子进行计算相关的数据，也就是入口文件 app.js 的 onLaunch 生命周期钩子
App.js 代码如下：

// app.js
App({
   
  globalData: {
   
    
  },
  onLaunch() {
   
    this.setNavBarInfo();
  },

  setNavBarInfo(){
   
    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;
      }