自适应组件导航栏

 

 以上目录结构

tops是自定义组件导航栏

indexs使用

先贴上tops代码

js

// utils/tops/tops.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', {});
    }
  }
})

 

css

/* utils/tops/tops.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;
}

html

<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>

 

开启全局自定义导航栏，引入自定义导航栏

    "usingComponents": {
      "navBar": "/utils/tops/tops"
    },
      "window": {
    "navigationStyle":"custom"
  }

indexs使用

<navBar 
    title-text="" 
    back-icon="/images/[email protected]"
    home-icon="/images/[email protected]"
    background="#f2f2f2"
    bindback="back"/>