微信小程序自定义导航栏（含代码&效果图）

做成组件，方便多页面引用

app.js的onLaunch里取得状态栏胶囊的信息并存到全局变量globalData

app.js
  onLaunch: function(option) {
    var that = this
    //设置导航栏信息
    this.getNavBarInfo()

  },
  getNavBarInfo() {
    // 获取系统信息
    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;
    this.globalData.menuWidth= menuButtonInfo.width;
  },
  // 全局变量
  globalData: {
    // 导航栏高度
    navBarHeight: 0, 
    // 胶囊距底部间距（保持底部间距一致）
    menuBotton: 0, 
    // 胶囊距右方间距（方保持左、右间距一致）
    menuRight: 0,
    // 胶囊高度（自定义内容可与胶囊高度保证一致）
    menuHeight: 0,
    //胶囊宽度（自定义内容可与胶囊宽度保证一致）
    menuWidth:0
  },

navigation.wxml

<view class="nav" style="height:{
  {navBarHeight}}px;">
  <view class="nav-main">
    <view 
      class="capsule-box" 
      style="height:{
  {menuHeight}}px; min-height:{
  {menuHeight}}px; line-height:{
  {menuHeight}}px; bottom:{
  {menuBotton}}px;left:{
  {menuRight}}px;">
    <!--