自定义微信小程序navbar

前言：由于微信小程序自定义navBar会使用原有的navBar消失掉，页面顶置，所以需要计算其statusBar手机状态栏的高度和原有的tabbar的高度，其安卓是48，ios是44。其中标题的字体大小也是需要计算的，其代码如下：

// 计算自定义navBar的字体大小以及高度
    wx.getSystemInfo({
      success: res => {
        let titleBarHeight = 44
        let phoneType = 'ios'
        let fontSizes = parseInt(38 * (res.screenWidth / 750))
        if (res.model.indexOf('iPhone') !== -1) {
          titleBarHeight = 44
          phoneType = 'ios'
        } else {
          titleBarHeight = 48
          phoneType = 'android'
        }
        this.globalData.statusBarHeight = res.statusBarHeight
        this.globalData.titleBarHeight = titleBarHeight
        this.globalData.navBarFontSize = fontSizes
        this.globalData.phoneType = phoneType
      }
    })

我这里是定义在全局变量中的，其用意是在页面切换的时候navbar组件中的生命周期会再次执行，为避免多次执行，所以放在小程序初始化中定义

1、app.json配置

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "灵龙AI智能车贷",
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom"
  },

2、navBar.wxml

<view class="block" style="height:{{titleBarHeight + statusBarHeight}}px;"></view>
<cover-view class="navbar" style="height:{{titleBarHeight + statusBarHeight}}px;">
    <cover-view class="statusBar" style="height:{{statusBarHeight}}px"></cover-view>
    <cover-view 
        class='backIcon' 
        bindtap="backToPage" 
        style="height:{{titleBarHeight}}px;"
        hidden="{{!allowBack}}">
        <cover-view class="backIcon_center" style="width:{{fontSizes / 1.8}}px;height:{{fontSizes}}px">
            <cover-image src="/assets/backIcon.png"></cover-image>
        </cover-view>
        
    </cover-view>
    <cover-view wx:if="phoneType == 'ios'"
      style="height:{{titleBarHeight}}px; font-size:{{fontSizes}}px; line-height:{{titleBarHeight}}px;text-align:center;" 
      class="title">
      {{titleText}}
    </cover-view>
    <cover-view class="title" wx:else style="height:{{titleBarHeight}}px; font-size:{{fontSizes}}px; line-height:{{titleBarHeight}}px;text-align:left;padding-left:{{!allowBack ? '10px' : fontSizes / 1.8 + 20 + 'px'}}">{{titleText}}</cover-view>
</cover-view>

3、navBar.js

const app = getApp()

Component({
  options: {
    styleIsolation: 'isolated',//样式隔离
  },
  properties: {
    titleText: {
      type: String,
      value: 'test'
    },
    allowBack:{
      type: Boolean,
      value: false
    },
    backURL:{
      type: String,
      value: ''
    }
  },

  data: {
    statusBarHeight: app.globalData.statusBarHeight,
    titleBarHeight: app.globalData.titleBarHeight,
    fontSizes: app.globalData.navBarFontSize,
    phoneType: app.globalData.phoneType
  },
  ready: function () {
    // 在组件实例进入页面节点树时执行
    // console.log(this.data.phoneType)
  },
  methods: {
    
    backToPage: function () {
      // let url = this.data.backURL
      // if (url) {
        // wx.switchTab({ url })
      // }
      this.triggerEvent('toNextPage', {
        curPage: 1
      })
    }
  }
})

4、navBar.wxss

.block{
  width: 750rpx;
}
.navbar {
  width: 750rpx;
  background-color: #ffffff !important;
  overflow: hidden;
  z-index: 99999; 
  position: fixed;
  top: 0;
  left: 0;
}
.statusBar{
  width: 750rpx;
  
}
.weui-navigation-bar__btn_goback {
  font-size: 12px;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E");
  background-position: 50% 50%;
  background-size: cover;
}


.title {
  width: 750rpx;
  color: #000;  
}

.backIcon{
  width: auto;
  padding: 0px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  z-index: 55; 
}