Widget开发：自定义导航栏，兼容所有机型（完整案例）

大多数情况下我们使用微信官方的navigationBar配置，但有时我们需要配置导航栏集成搜索字段，自定义背景图片、返回首页按钮等

创意

• 隐藏官方导航栏
• 获取胶囊按钮和状态栏相关数据，方便后续计算
• 根据计算导航栏的高度编写新的导航栏
• 页面参考自定义导航

文字

隐藏官方导航栏

隐藏的导航栏可以全局配置，也可以在单独的页面上配置，具体取决于您的业务需求。

全局隐藏

//app.json
"window": {
   "navigationStyle": "custom"
}
复制代码

页面隐藏

//page.json
{
  "navigationStyle": "custom"
}
复制代码

获取胶囊按钮和状态栏相关数据，用于后续计算

公式：导航栏高度 = 状态栏到胶囊的距离（胶囊到状态栏上部距离 - 高度栏） ) * 2 胶囊高度状态栏高度。从公式中我们需要得到 状态线高度 胶囊高度 胶囊上距离状态线到胶囊的距离状态线到胶囊的距离至下限。所以这里需要*2

状态栏高度

使用wx.getSystemInfoSync()官方API获取系统相关信息，

const statusBarHeight = wx.getSystemInfoSync().statusBarHeight;
复制代码

胶囊高度和胶囊距上层的距离border

使用wx.getMenuButtonBoundingClientRect()关于菜单布局按钮胶囊API的官方信息获取菜单布局按钮。

const menuButtonInfo = wx.getMenuButtonBoundingClientRect();//胶囊相关信息
const menuButtonHeight = menuButtonInfo.height //胶囊高度
const menuButtonTop = menuButtonInfo.top//胶囊距上边界距离
复制代码

示例

一般情况下，我们在使用launch初始化生命周期hook时需要计算相关数据，即输入文件❀的onLaunch生命周期。 hook

//app.js
App({
  onLaunch: function () {
    this.setNavBarInfo()
  },
  
  globalData: {
    //全局数据管理
    navBarHeight: 0, // 导航栏高度
    menuBotton: 0, // 胶囊距底部间距（保持底部间距一致）
    menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
    menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
  },

  /**
   * @description 设置导航栏信息
   */
  setNavBarInfo () {
    // 获取系统信息
    const systemInfo = wx.getSystemInfoSync();
    // 胶囊按钮位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2   胶囊高度   状态栏高度
    this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2   menuButtonInfo.height   systemInfo.statusBarHeight;
    this.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
    this.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
    this.globalData.menuHeight = menuButtonInfo.height;
  }
})
复制代码

页面引用自定义导航

//page.wxml
"nav" style="height:{{navBarHeight}}px;">
  
  "capsule-box" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; bottom:{{menuBotton}}px;">
    "nav-handle">
      "nav-back-icon"  bind:tap="navToBackLastPage">
      "nav-home-icon"  bind:tap="navToHomePage">
    
    "nav-title">导航标题
  

复制代码

// page.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navBarHeight: app.globalData.navBarHeight,//导航栏高度
    menuBotton: app.globalData.menuBotton,//导航栏距离顶部距离
    menuHeight: app.globalData.menuHeight //导航栏高度
  }

复制代码

，封装在一个组件中

我们可以在各自的页面上实现不同的效果，比如在导航栏上添加搜索字段、日期等。此时，我们就可以封装一个自定义的组件来大大提高我们的开发效率。

新组件

// components/navigation/index.wxml
"nav" style="height:{{navBarHeight}}px;">
  "nav-main">
    
    "capsule-box" 
      style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; bottom:{{menuBotton}}px;left:{{menuRight}}px;"
    >
    
      
    
  

复制代码

// components/navigation/index.wxss
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
}
.nav-main {
  width: 100%;
  height: 100%;
  position: relative;
}
.nav .capsule-box {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
}

复制代码

// components/navigation/index.js
const app = getApp()
Component({
  /**
   * 组件的初始数据
   */
  data: {
    navBarHeight: app.globalData.navBarHeight, //导航栏高度
    menuRight: app.globalData.menuRight, // 胶囊距右方间距（方保持左、右间距一致）
    menuBotton: app.globalData.menuBotton,
    menuHeight: app.globalData.menuHeight
  }
})
复制代码

页面参考

页面配置介绍自定义组件

//index.json
{
  "navigationStyle": "custom",
  "navigationBarTextStyle": "white",
  "usingComponents": {
    "navigation": "/components/Navigation/index"
  }
}
复制代码

页面使用

  "current-date">
     4月24日
  

复制代码

概述本文主要是讲如何针对自定义计算自定义导航，具体业务和风格根据自己的产品来定。

作者：胖子快乐水
链接：https://juejin.im/post/5e91281fe51d4546f6308cc3
来源：掘金❀归属作者所有。商业转载请联系作者获取授权。非商业转载请注明出处。