微信小程序自定义导航栏

首先json里设置   

"navigationStyle": "custom"

做一个同样大小的胶囊  (目前估算胶囊圆角是35)

<view style="width:{{width}}rpx;height:{{height}}rpx;line-height:{{height}}rpx;text-align:center">胶囊</view>    //一个胶囊

然后在js中获取手机设备信息,胶囊位置信息

  onLoad: function (options) {
    const that = this;
      // 获取系统信息
      const systemInfo = wx.getSystemInfoSync();
      //胶囊位置信息
      const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
      // statusBarHeight  状态栏
      //整个导航栏高度=状态栏高度+胶囊高度+(胶囊到顶部的高度-状态栏高度)*2
      // 胶囊按钮与右侧的距离 = windowWidth(系统信息) - right(胶囊信息)。
　　　　//获取到信息单位：px 转换成rpx *2

      this.setData({
         width:(menuButtonInfo.width)*2, //胶囊宽度
         height:(menuButtonInfo.height)*2 // 胶囊高度
      })
  },

有了这些数据,调一下样式 自定义导航栏就完成了(自定义图标与胶囊齐平，对称 )