uniapp监听tabbar

在uniapp中，可以通过监听页面的生命周期函数和全局事件来监听tabbar的切换。

首先，在App.vue中，可以监听全局的"uni.$emit"事件，该事件会在tabbar切换时触发。

export default {
  globalData: {
    currentTabbarIndex: 0  // 当前选中的tabbar索引
  },
  onLaunch() {
    uni.$on('uniSwitchTab', (res) => {
      this.globalData.currentTabbarIndex = res.index
    })
  }
}

在TabBar.vue组件中，需要监听tabbar的切换事件，并通过"uni.$emit"触发全局的"uniSwitchTab"事件。

<template>
  <view>
    <view class="tabbar-item" :class="{ 'active': current === index }" v-for="(item, index) in list" :key="index" @tap="switchTab(index)">
      <text class="tabbar-icon">{{ item.icon }}</text>
      <text class="tabbar-text">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      current: 0
    }
  },
  methods: {
    switchTab(index) {
      if (this.current !== index) {
        this.current = index
        uni.$emit('uniSwitchTab', { index })
        uni.switchTab({
          url: this.list[index].pagePath
        })
      }
    }
  }
}
</script>

这样，就可以在App.vue中监听到tabbar的切换事件，从而进行一些处理，比如修改当前选中的tabbar索引等。