小程序自定义导航栏适配

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,