haowanShow/miniprogram/components/tab-bar/tab-bar.js

import eventEmitter from '../../utils/eventEmitter'
import { isPhoneX } from './../../utils/tools'
import $router from './../../utils/routes'
let app = getApp()
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    inactiveColor: {
      type: String,
      value: '#79868F'
    },
    activeColor: {
      type: String,
      value: '#1FE4DC'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    active: 0,
    tabItems: [
      {
        title: '首页',
        url: 'home',
        icon: {
          normal: '/assets/images/tabs/home.svg',
          active: '/assets/images/tabs/home-active.svg'
        }
      },
      // {
      //   title: '直播',
      //   url: 'live',
      //   icon: {
      //     normal: '/assets/images/tabs/live.svg',
      //     active: '/assets/images/tabs/home-active.svg'
      //   }
      // },
      {
        title: '发现',
        url: 'find',
        icon: {
          normal: '/assets/images/tabs/find.svg',
          active: '/assets/images/tabs/home-active.svg'
        }
      },
      {
        title: '消息',
        url: 'chatList',
        info: app.globalData.unViewMsg,
        icon: {
          normal: '/assets/images/tabs/msg.svg',
          active: '/assets/images/tabs/msg-active.svg'
        }
      },
      {
        title: '我的',
        url: 'my',
        icon: {
          normal: '/assets/images/tabs/my.svg',
          active: '/assets/images/tabs/my-active.svg'
        }
      },
    ],
    isPhoneX: false
  },

  attached: function() {
  },
  pageLifetimes: {
    show () {
      
      const currentRoute = getCurrentPages()[0].route
      const { tabItems } = this.data
      tabItems[2].info = app.globalData.unViewMsg
      tabItems.forEach((item, index) => {
        if ($router.tabRoutes[item.url] && $router.tabRoutes[item.url].indexOf(currentRoute) !== -1) {
          this.setData({
            active: index,
            tabItems: tabItems,
          })
        } 
      })
      isPhoneX().then(res => {
        this.setData({
          isPhoneX: res
        })
      })
      this.init()
    },
    hide () {
      getApp().getIMHandler().removeOnReceiveMessageListener({listener: this.fn})
    }
  },
  
  /**
   * 组件的方法列表
   */
  methods: {
    onChange(e) {
      const index = e.detail, { tabItems } = this.data
      $router.push(tabItems[index].url)
      // wx.switchTab({
      //   url: tabItems[index].url,
      // })
    },
    init () {
      this.fn = (msg) => {
        
        const { tabItems } = this.data
        app.globalData.unViewMsg = app.globalData.unViewMsg ? app.globalData.unViewMsg+1 : 1
        tabItems[3].info = app.globalData.unViewMsg
        this.setData({
          tabItems
        })
        app.getNewMessage(msg)
      }
      getApp().getIMHandler().setOnReceiveMessageListener({
        listener: this.fn
    });
    }
  }
})