uniapp全局监听底部导航栏的点击事件

你可以通过在 App.vue 中监听底部导航栏的点击事件来实现全局监听。具体步骤如下：

1. 在 App.vue 中引入 uni-app 的 tabBar 组件。

<template>
  <div>
    <tab-bar :list="tabBarList" @change="onTabBarChange"></tab-bar>
    <router-view />
  </div>
</template>
<script>
  import tabBar from '@/components/tab-bar/tab-bar.vue'

  export default {
    components: {
      tabBar
    },
    data() {
      return {
        tabBarList: [
          { iconPath: 'static/tab-bar/home.png', selectedIconPath: 'static/tab-bar/home-active.png', text: '首页', pagePath: '/pages/home/home' },
          { iconPath: 'static/tab-bar/mine.png', selectedIconPath: 'static/tab-bar/mine-active.png', text: '我的', pagePath: '/pages/mine/mine' }
        ]
      }
    },
    methods: {
      onTabBarChange(e) {
        console.log('tabBar change', e)
      }
    }
  }
</script>

2. 在 tabBar 组件中触发 change 事件。

<template>
  <div class="tab-bar">
    <div class="tab-bar-item" v-for="(item, index) in list" :key="index" @click="handleClick(index)">
      <img :src="item.selected ? item.selectedIconPath : item.iconPath" />
      <div>{{ item.text }}</div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      list: {
        type: Array,
        default: () => []
      }
    },
    methods: {
      handleClick(index) {
        this.list.forEach((item, i) => {
          item.selected = i === index
        })
        this.$emit('change', index)
      }
    }
  }
</script>

3. 在其他页面中使用 tabBar 组件。

<template>
  <div>
    <text>这是首页</text>
  </div>
</template>
<script>
  export default {
    onTabBarChange(index) {
      console.log('index:', index)
    }
  }
</script>

通过在 App.vue 中监听 tabBar 组件的 change 事件，可以在任何页面中都能够触发该事件，从而实现全局监听底部导航栏的点击事件。