微信小程序 自定义导航栏

效果图：

导航栏高度计算：导航栏高度 = （胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度

状态栏到胶囊的间距：胶囊距上距离-状态栏高度

计算导航栏高度

//app.js
App({
  onLaunch () {
    // 获取系统信息
    const { statusBarHeight, platform } = wx.getSystemInfoSync();
    // 胶囊按钮位置信息
    const { top, height } = wx.getMenuButtonBoundingClientRect();
    let navigationBarHeight = 0;

    // 判断胶囊按钮信息是否成功获取
    if (top && top !== 0 && height && height !== 0) {
      navigationBarHeight = (top - statusBarHeight) * 2 + height;
    } else {
      let gap = ''; //胶囊按钮上下间距 使导航内容居中
      let width = 96; //胶囊的宽度，android大部分96，ios为88
      if (platform  === 'android') {
        gap = 8;
        width = 96;
      } else if (platform === 'devtools') {
        if (ios) {
          gap = 5.5; //开发工具中ios手机
        } else {
          gap = 7.5; //开发工具中android和其他手机
        }
      } else {
        gap = 4;
        width = 88;
      }
    }

    // 状态栏高度
    this.globalData.statusBarHeight = statusBarHeight
    // 导航栏高度
    this.globalData.navigationBarHeight = navigationBarHeight
    this.globalData.customNavbarHeight = statusBarHeight + navigationBarHeight
  },
  globalData: {
    statusBarHeight : 0, // 状态栏高度
    navigationBarHeight : 0, // 导航栏高度
    customNavbarHeight : 0 //自定义导航栏高度
 }
})

在页面配置文件中将navigationStyle改为custom

app.json
{
  "pages": [
    "pages/index/index",
  ],
  "window": {
    "navigationStyle": "custom"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

自定义导航栏组件代码

// components/custom-navbar/custom-navbar.js
const app = getApp()

Component({
  properties: {
    navbarData: {
      type: Object,
      value: {
        backgroundColor: '#FFFFFF',
        isWhiteLeftArrow: false,
        title: ''
      }
    }
  },
  data: {
    // 状态栏高度
    statusBarHeight: app.globalData.statusBarHeight,
    // 导航栏高度
    navigationBarHeight: app.globalData.navigationBarHeight,
  },
  methods: {
    navBack () {
      wx.navigateBack()
    }
  }
})

<!--components/custom-navbar/custom-navbar.wxml-->
<view class="navbar-container" style="height:{{navigationBarHeight}}px;padding-top:{{statusBarHeight}}px;background:{{navbarData.backgroundColor}}">
  <view class="navbar-left-box" bindtap="navBack" style="height:{{navigationBarHeight}}px;">
    <image wx:if="{{navbarData.isWhiteLeftArrow}}" class="navbar-left-white-icon" src="/img/custom_navbar/left_arrow_white.png" />
    <image wx:else class="navbar-left-icon" src="/img/custom_navbar/left_arrow.png" />
  </view>

  <view class="navbar-title" style="color:{{navbarData.titleColor}}">{{navbarData.title}}</view>
</view>

/* components/custom-navbar/custom-navbar.wxss */
.navbar-container {
  width: 100%;
  position: fixed;
  top: 0;
  display: flex;
  align-items: center;
  color: #000;
  z-index: 98;
}
.navbar-left-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.navbar-left-icon {
  width: 50rpx;
  height: 48rpx;
  margin-left: 40rpx;
}
.navbar-left-white-icon {
  width: 72rpx;
  height: 64rpx;
  margin-left: 40rpx;
}
.navbar-title {
  position: absolute;
  left: 200rpx;
  right: 200rpx;
  text-align: center;
  font-size: 32rpx;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

{
  "component": true,
  "usingComponents": {}
}

页面代码

index.js
Page({
  data: {
    navbarData: {
      backgroundColor: '#027CFF',
      isWhiteLeftArrow: true,
      title: '测试自定义导航栏'
    }
  }
})

index.wxml
<custom-navbar navbarData="{{navbarData}}"></custom-navbar>
<view class="about-container"></view>

index.json
{
  "component": true,
  "usingComponents": {
    "custom-navbar": "/components/custom-navbar/custom-navbar"
  }
}