小程序自定义导航栏适配

1、页面JSON配置

由于微信小程序自带的导航栏不能够完全满足开发的需求，所以需要使用自定义导航栏，因此记录一下，以便以后使用

{
  "usingComponents": {
    "my-nav": "/components/nav/nav"  
  },
  "navigationStyle": "custom"
}

2、高度计算

由于IOS的导航栏和安卓的导航栏高度不同，适配之前需要先获取到他们的高度

• 导航栏高度 = 胶囊按钮高度 + 状态栏到胶囊按钮间距 * 2
• Android导航栏高度 = 32px + 8px * 2 = 48px
• iOS导航栏高度 = 32px + 6px * 2 = 44px

由于系统的信息只需要获取一次就好，所以放到app的全局变量中

App({
  onLaunch: function () {
    // 通过系统信息计算导航栏高度        
    const sysinfo = wx.getSystemInfoSync(),
      statusHeight = sysinfo.statusBarHeight,
      isiOS = sysinfo.system.indexOf('iOS') > -1;
    let navHeight;
    if (!isiOS) { 
      navHeight = 48;
    } else {
      navHeight = 44;
    }
    this.globalData.status = statusHeight;
    this.globalData.navHeight = navHeight;
  },
  globalData: {
    status: 0, // 状态栏高度
    navHeight: 0 // 标题栏高度
  }
})

3、nav.js代码

properties设置一些组件调用的时候传的参数，也可以自行添加

const app = getApp();
Component({
  properties: {
    // 背景样式
    background: {
      type: String,
      value: 'rgba(0, 0, 0, 0)'
    },
    // 字体样式
    color: {
      type: String,
      value: 'rgba(0, 0, 0, 1)'
    },
    // 标题
    titleText: {
      type: String,
      value: '自定义导航栏'
    },
    // 标题图片
    titleIcon: {
      type: String,
      value: ''
    },  
    // 返回图标
    backIcon: {
      type: String,
      value: ''
    },
    // home图标
    homeIcon: {
      type: String,
      value: ''
    },
    // 字体大小 
    fontSize: {
      type: Number,
      value: 16
    },
    // 标题图标大小
    iconHeight: {
      type: Number,
      value: 30
    },
    iconWidth: {
      type: Number,
      value: 30
    }
  },
  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
      var that = this;
      this.setData({
        status: app.globalData.status,
        navHeight: app.globalData.navHeight
      });
      that.setStyle();
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  methods: {
    // 设置样式，初始化的时候将数据拼接起来，也可以自行添加
    setStyle: function () {
      const that = this
      let navStyle, textStyle, iconStyle;
      navStyle = [
        '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(';');
      this.setData({
        navStyle: navStyle,
        textStyle: textStyle,
        iconStyle: iconStyle
      })
    },
    // 返回事件        
    back: function () {
      wx.navigateBack({
        delta: 1
      })
    },
    home: function () {
      this.triggerEvent('home', {});
    }
  }
})

4、nav.wxml代码

组件的wxml代码

<view class='nav' style='height: {{status + navHeight}}px;{{navStyle}}'>
  <view class='status' style='height: {{status}}px'></view>
  <view class='navbar' style='height:{{navHeight}}px'>
    <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="{{titleIcon}}">
      <image src='{{titleIcon}}' style='{{iconStyle}}'></image>
    </view>
    <view class='nav-title' wx:if="{{titleText && !titleIcon}}">
      <text style='{{textStyle}}'>{{titleText}}</text>
    </view>
  </view>
</view>

5、nav.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;
}

6、wxml页面使用

传入不同参数设置不同效果

<my-nav titleText="测试" homeIcon="/images/user-unlogin.png" backIcon="/images/user-unlogin.png" fontSize="14"></my-nav>