小程序自定义导航栏适配

把导航栏写成一个自定义组件
参考文档：小程序自定义导航栏适配（完美版）
js

Component({
  properties: {
    background: {
      type: String,
      value: 'rgba(255, 255, 255, 1)'
    },
    color: {
      type: String,
      value: 'rgba(0, 0, 0, 1)'
    },
    titleText: {
      type: String,
      value: '导航栏'
    },
    titleImg: {
      type: String,
      value: ''
    },
    backIcon: {
      type: String,
      value: ''
    },
    homeIcon: {
      type: String,
      value: ''
    },
    fontSize: {
      type: Number,
      value: 16
    },
    iconHeight: {
      type: Number,
      value: 19
    },
    iconWidth: {
      type:Number,
      value: 58
    }
  },
  attached: function(){
    var that = this;
    that.setNavSize();
    that.setStyle();
  },
  data: {
  },
  methods: {
    // 通过获取系统信息计算导航栏高度
    setNavSize: function() {
      var that = this, sysinfo = wx.getSystemInfoSync(), statusHeight = sysinfo.statusBarHeight, isiOS = sysinfo.system.indexOf('iOS') > -1, navHeight;
      if (!isiOS) {
        navHeight = 48;
        } else {
        navHeight = 44;
      }
      that.setData({
        status: statusHeight,
        navHeight: navHeight
      })
    },
    setStyle: function() {
      var that  = this, containerStyle, textStyle, iconStyle;
      containerStyle = [
        'background:' + that.data.background
      ].join(';');
      textStyle = [
        'color:' + that.data.color,
        'font-size:' + that.data.fontSize + 'px'
      ].join(';');
      iconStyle = [
        'width: ' + that.data.iconWidth + 'px',
        'height: ' + that.data.iconHeight + 'px'
      ].join(';');
      that.setData({
        containerStyle: containerStyle,
        textStyle: textStyle,
        iconStyle: iconStyle
      })        
    },
    // 返回事件
    back: function(){
      wx.navigateBack({
        delta: 1
      })
      this.triggerEvent('back', {back: 1})
    },
    home: function() {
      this.triggerEvent('home', {});
    }
  }
})

wxml：

<view class='nav' style='height: {{status + navHeight}}px;'>
  <view class='status' style='height: {{status}}px;{{containerStyle}}'></view>
  <view class='navbar' style='height:{{navHeight}}px;{{containerStyle}}'>
    <view class='back-icon' wx:if="{{backIcon}}" bindtap='back'>
      <image src='{{backIcon}}'></image>
    </view>
    <view class='home-icon' wx:if="{{homeIcon}}" bindtap='home'>
        <image src='{{homeIcon}}'></image>
    </view>
    <view class='nav-icon' wx:if="{{titleImg}}">
      <image src='{{titleImg}}' style='{{iconStyle}}'></image>
    </view>
    <view class='nav-title' wx:if="{{titleText && !titleImg}}">
        <text style='{{textStyle}}'>{{titleText}}</text>
    </view>
  </view>
</view>

wxss：

.navbar{position: relative;}
.back-icon, .home-icon{width: 28px;height: 100%;position: absolute;transform: translateY(-50%);top: 50%;display: flex;}
.back-icon{left: 16px;}
.home-icon{left: 44px;}
.back-icon image{width: 28px;height: 28px;margin: auto;}
.home-icon image{width: 20px;height: 20px;margin: auto;}
.nav-title, .nav-icon{position: absolute;transform: translate(-50%, -50%);left: 50%;top: 50%;font-size: 0;font-weight: bold;}