TaxWeChatApp/miniprogram/components/customer-navbar/customer-navbar.js

//获取应用实例
const app = getApp()
Component({
  options: {
    multipleSlots: true
  },
  properties: {
    title: { //导航栏标题
      type: String,
      value: '诺信云'
    },
    color: { //标题字体颜色
      type: String,
      value: '#fff'
    },
    transparent: { //是否透明
      type: Boolean,
      value: false
    },
    background: { //背景色
      type: String,
      value: '#007dff'
    },
    border: { //导航栏下边框样式
      type: String,
      value: 'border-bottom:none'
    },
    cusPath: { //用户自定义返回操作
      type: Boolean,
      value: false
    },
    backPath: { //左侧返回按钮点击后的返回路径(没有的话默认返回上一页)
      type: Boolean,
      value: false
    },
    backImage: { //左侧箭头图片
      type: String,
      value: '../../images/icon-back.svg'
    },
    loading: { //是否显示导航栏loading
      type: Boolean,
      value: false
    },
    dbclickBackTop: { //双击标题返回顶部功能是否开启
      type: Boolean,
      value: false
    },
    leftType: { //标题显示方式normal(安卓居左，ios居右),android(无论ios还是安卓，全部居左),ios(无论安卓还是ios，全部居中)
      type: String,
      value: 'normal'
    }
  },
  data: {
    showBack: false, //是否显示返回按钮
  },
  attached: function () {
    let systemInfo = app.globalData.systemInfo
    if (systemInfo) {
      this.setNavbar(systemInfo)
    } else {
      wx.getSystemInfo({
        success: res => {
          this.setNavbar(res)
        }
      })
    }
    //是否显示返回按钮(如果是第一页，就不显示，如果不是第一页，就显示)
    let pages = getCurrentPages()
    if (pages.length > 1) {
      this.setData({
        showBack: true
      })
    }
  },
  methods: {
    //点击返回按钮
    goBack() {
      if (this.data.cusPath === false) {
        if (this.data.backPath) {
          wx.switchTab({
            url: this.data.backPath
          })
        } else {
          wx.navigateBack()
        }
      } else {
        this.triggerEvent('back')
      }
    },
    //双击返回顶部
    doubleClick(e) {
      if (!this.data.dbclickBackTop) {
        return
      }
      if (this.timeStamp && (e.timeStamp - this.timeStamp < 300)) {
        this.timeStamp = 0
        wx.pageScrollTo({
          scrollTop: 0,
          duration: 300
        })
      } else {
        this.timeStamp = e.timeStamp
      }
    },
    //设置自定义导航信息
    setNavbar(systemInfo) {
      let isSupport = !!wx.getMenuButtonBoundingClientRect //是否支持获取胶囊按钮信息
      let rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null //获取胶囊按钮信息
      let ios = !!(systemInfo.system.toLowerCase().search('ios') + 1) //是否是ios系统
      let topBarHeight = ios ? (44 + statusBarHeight) : (48 + statusBarHeight) //获取导航栏高度
      let statusBarHeight = systemInfo.statusBarHeight //获取状态栏高度
      let leftStyle
      if (ios) {
        if (this.data.leftType !== 'android') {
          leftStyle = isSupport ? 'width:' + (systemInfo.windowWidth - rect.left) + 'px' : ''
        } else {
          leftStyle = 'margin-right:18px;'
        }
      } else {
        if (this.data.leftType !== 'ios') {
          leftStyle = 'margin-right:18px;'
        } else {
          leftStyle = isSupport ? 'width:' + (systemInfo.windowWidth - rect.left) + 'px' : ''
        }
      }
      this.setData({
        ios,
        topBarHeight,
        statusBarHeight,
        innerWidth: isSupport ? 'width:' + rect.left + 'px' : '',
        innerPaddingRight: isSupport ? 'padding-right:' + (systemInfo.windowWidth - rect.left) + 'px' : '',
        leftStyle
      })
      let eventDetail = {
        topBarHeight,
        statusBarHeight
      }
      this.triggerEvent('getNavbarInfo', eventDetail)
    }
  }
})