微信小程序自定义导航栏

页面效果：

一、在需要自定义的单个页面的json中配置：

{
  "navigationStyle": "custom"
}

二、在app.js的onLaunch方法里面获取手机状态栏高度，全局定义导航高度navHeight：

wx.getSystemInfo({
      success: res => {
        //导航高度
        this.globalData.navHeight  = res.statusBarHeight + 46;
      }, fail(err) {
        console.log(err);
      }
})

globalData: {
    userInfo: null,
    navHeight: 0
}

三、在需要导航的 页面Page拿到全局变量导航高度：

const App = getApp();
Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      navH: App.globalData.navHeight
    })
  },
})

四、页面展示：

wxml代码：

<view class='nav bg-white' style='height:{{navH}}px'>
    <view class='nav-title'>
      标题
      <image src='../public_imgs/notice.png' mode='aspectFit' class='back' bindtap='goMessage'></image>
      <span class="red_dot" wx:if="{{messageCount>0}}">{{messageCount}}</span>
    </view>
</view>

wxss代码:

.nav {
  width: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

.nav-title {
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  color: rgba(7, 7, 7, 1);
  font-family: PingFangSC-Medium;
  font-size: 32rpx;
  font-weight: bold;
}

.nav .back {
  width: 34px;
  height: 34px;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px 15px;
}

.bg-white {
  background-color: #fff;
}

.red_dot {
  position: absolute;
  top: 3px;
  left: 35px;
  background: #f15a5b;
  border: 1px solid rgba(255, 255, 255, 1);
  z-index: 999;
  width: 32rpx;
  height: 32rpx;
  border-radius: 100%;
  font-size: 20rpx;
  line-height: 32rpx;
  text-align: center;
  color: #fff;
  font-weight: 300;
}

参考：https://www.jianshu.com/p/5753a0e1754f