小程序自定义导航栏

本篇为写给自己看

index.wxml

    <view class="status-bar" style="height:{{statusBarHeight}}px"></view>
    <view class='nav' style="height:{{titleBarHeight}}px">
      <view class='navLeft'>
        <view class='iconBox' bindtap='tapNavigate' data-item='person'>
          <image class='icon' src='/images/icon-personSmall.png'></image>
        </view>
        <view class='leftLine'></view>
        <view class='iconBox' bindtap='tapNavigate' data-item='message'>
          <image class='icon' src='/images/icon-msg.png'></image>
          <view class='redMsg'></view>
        </view>
      </view>
      <view class='navMid'>商户系统</view>
    </view>

　　index.wxss

.nav{
  position: relative;
  left: 0;
   90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.navLeft{
   176rpx;
  height: 64rpx;
  background: rgba(0,0,0,0.10);
  border: 1rpx solid rgba(255, 255, 255, 0.205); 
  border-radius: 68rpx;
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navMid{ 
  color: white;
  margin: auto;
  font-size: 32rpx;
}

.iconBox{
  height: 200%;
   50%;
  display: flex;
  align-items: center;
  justify-content: center; 
  position: relative;
}
.redMsg{
  position: absolute;
  right: 35%;
  top: 35%;
   10rpx;
  height: 10rpx;
  border-radius: 100%;
  background: red;

}
.leftLine{
  height: 55%;
  border-left: 1rpx solid rgba(255, 255, 255, 0.219);
}

.icon{
   32rpx;
  height: 32rpx;
}

js

  onLaunch: function () {
    const vm = this
    // let totalTopHeightSet = {
    //   'iPhone': 64,
    //   'iPhone X': 88,
    //   'android': 68
    // }
    wx.getSystemInfo({
      success: function (res) {
        let totalTopHeight = 68
        if (res.model.indexOf('iPhone X') !== -1) {
          totalTopHeight = 88
        } else if (res.model.indexOf('iPhone') !== -1) {
          totalTopHeight = 64
        }
        vm.globalData.statusBarHeight = res.statusBarHeight
        vm.globalData.titleBarHeight = totalTopHeight - res.statusBarHeight
      },
      failure() {
        vm.globalData.statusBarHeight = 0
        vm.globalData.titleBarHeight = 0
      }
    })
  },