微信小程序自定义导航栏

在小程序开发过程中难免会遇到小程序原有的导航不能满足项目中的需求，所以需要自己去自定义导航栏，接下来就和大家分享一下如何实现自定义导航栏，如果有不足之处，还望指出，谢谢！（接下来只提供主要的代码段）
一、更改小程序app.json配置文件
在小程序app.json的配置文件中的window属性中添加**navigationStyle：“custom”**

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

二、创建公共的导航栏组件

我是在component文件夹下边创建了一个名为navbar组件(这里的名称自己定义)，该组件中的四个文件以及内容分别为：
navbar.js:

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    title: {            // 属性名
      type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: ''     // 属性初始值（可选），如果未指定则会根据类型选择一个
    }
  },
  data: {
    // 状态栏高度
    statusBarHeight: wx.getStorageSync('statusBarHeight') + 'px',
    // 导航栏高度
    navigationBarHeight: wx.getStorageSync('navigationBarHeight') + 'px',
    // 胶囊按钮高度
    menuButtonHeight: wx.getStorageSync('menuButtonHeight') + 'px',
    // 导航栏和状态栏高度
    navigationBarAndStatusBarHeight:
      wx.getStorageSync('statusBarHeight') +
      wx.getStorageSync('navigationBarHeight') +4+
      'px', //导航栏的高度多出的4px是我做的项目的需要，这个根据实际需求高度可以在这里更改
  }
})

navbar.json:

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

navbar.wxml:

<!--navigationBar.wxml-->
<view class="navigation-container" style="{{'height: ' + navigationBarAndStatusBarHeight}}">
    <!--空白来占位状态栏-->
    <view style="{{'height: ' + statusBarHeight}}"></view>
    <!--自定义导航栏-->
    <view class="navigation-bar" style="{{'height:' + navigationBarHeight}}">
        <view class="navigation-buttons" style="{{'height:' + menuButtonHeight}}">
        <!--插槽位置可以根据自己需要添加相应的功能-->
          <slot name="imge-box"></slot>
        </view> 
        <view class="navigation-title" style="{{'line-height:' + navigationBarHeight}}">{{title}}</view>
    </view>    
</view>
<!--空白占位fixed空出的位置-->
<view style="{{'height: ' + navigationBarAndStatusBarHeight}}; background: #ffffff"></view>

navbar.wxss:

/* navigationBar.wxss */
.navigation-container {
  position: fixed;
  width: 100%;
  z-index: 99;
  top: 0;
  left: 0;
  background-color: #0080FF;
  opacity: 1;
  /* background: -webkit-linear-gradient(bottom,#2A94FD
  ,#0080FF); */
}
.navigation-bar {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.navigation-buttons {
  display: flex;
  align-items: center;
  margin-left: 12px;
  /* border: 1px solid rgba(0, 0, 0, 0.05); */
  box-sizing: border-box;
  border-radius: 15px;
  background-color: transparent;
}
.nav-img{
  height: 16px;
  width: 16px;
}
.navigation-title {
  position: absolute;
  left: 104px;
  right: 104px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family:"PingFangSC-Semibold";
}
.image_back_class{
  height: 48rpx;
  width: 48rpx;
}

三、在全局设置获取导航栏高度并计算实际高度
在app.js文件中的onLaunch方法中获取导航栏高度

App({
  onLaunch(options) {
    /**
     * 计算自定义导航栏的高度
     */
    const { statusBarHeight, platform } = wx.getSystemInfoSync()
    const { top, height } = wx.getMenuButtonBoundingClientRect()
    // 状态栏高度
    wx.setStorageSync('statusBarHeight', statusBarHeight)
    // 胶囊按钮高度 一般是32 如果获取不到就使用32
    wx.setStorageSync('menuButtonHeight', height ? height : 32)
    // 判断胶囊按钮信息是否成功获取
    if (top && top !== 0 && height && height !== 0) {
        const navigationBarHeight = (top - statusBarHeight) * 2 + height
        // 导航栏高度
        wx.setStorageSync('navigationBarHeight', navigationBarHeight)
    } else {
        wx.setStorageSync(
          'navigationBarHeight',
          platform === 'android' ? 48 : 40
        )
    }
}
})

四、在页面中引用导航栏组件
这里我以做的一个home页面为例。首先在home.json中添加引用配置：

{
  "usingComponents": {
    "navbar":"../../component/navbar/navbar"
  }
}

然后在home.wxml页面中使用导航栏组件：

<view class="container" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
  <navbar title="{{title}}">
    <view slot="imge-box">
      <image src="../image/icon_24_shouye@2x.png" class="image_back_class"></image>
    </view>
  </navbar>
  <view>
  `这里是页面中其他功能的代码`
  </view>
/view>

最后展示我实现的效果

导航栏的标题可以根据要自行更改。至此自定义导航栏的创建和引用都已经分享完了，这个导航栏可以完全根据实际需要做相应的更改（除了右边的胶囊）。亲测直接可以使用(样式可以根据自己的需要更改)。