uniapp 如何监听tab-click事件

在uniapp中，如何监听tabbar的tab-click事件？我尝试在页面的methods里添加事件监听，但没有触发。官方文档提到uni.onTabBarMidButtonTap，但这是针对中间按钮的。请问普通tab项点击事件应该怎么监听？

2 回复

在uni-app中，监听tab-click事件可以通过在uni-tabs组件上绑定@click事件实现：

<uni-tabs @click="onTabClick">
  <!-- tab内容 -->
</uni-tabs>

methods: {
  onTabClick(e) {
    console.log('点击的tab索引:', e.index)
    // 处理点击逻辑
  }
}

注意：确保使用的是uni-ui的tabs组件，原生的swiper-tab不支持此事件。


在 UniApp 中，监听 tab-click 事件通常用于自定义的 Tab 栏组件（如自定义底部导航栏），因为 UniApp 自带的原生 TabBar 不支持直接监听点击事件。以下是实现方法：

1. 使用自定义 Tab 栏

  • 在 pages.json 中禁用原生 TabBar：
    {
  "tabBar": {
    "custom": true
  }
}
  • 创建自定义 Tab 栏组件（如 custom-tab-bar.vue），监听点击事件并触发自定义逻辑。

2. 代码示例

在 custom-tab-bar.vue 中：

<template>
  <view class="custom-tab-bar">
    <view 
      v-for="(item, index) in list" 
      :key="index" 
      class="tab-item"
      @click="handleTabClick(index)"
    >
      {{ item.text }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { text: "首页" },
        { text: "分类" },
        { text: "我的" }
      ]
    };
  },
  methods: {
    handleTabClick(index) {
      // 触发自定义事件，可通过 Vuex 或全局事件总线传递
      uni.$emit('tab-click', { index });
      // 可选：跳转页面（根据路由配置）
      const pages = ['/pages/index/index', '/pages/category/index', '/pages/user/index'];
      uni.switchTab({ url: pages[index] });
    }
  }
};
</script>

3. 监听事件

在其他页面或组件中监听：

export default {
  mounted() {
    uni.$on('tab-click', (data) => {
      console.log('Tab 被点击，索引:', data.index);
      // 执行自定义逻辑
    });
  },
  beforeDestroy() {
    uni.$off('tab-click'); // 避免内存泄漏
  }
};

注意事项：

  • 原生 TabBar：UniApp 原生 TabBar 无法直接监听点击事件，需通过页面生命周期（如 onTabItemTap）处理。
  • 适用场景：自定义 Tab 栏适用于需要复杂交互或样式的场景。

通过以上方法，即可实现对 Tab 点击事件的监听和响应。

回到顶部