uni-app onTabItemTap 在App（自定义组件模式）下不生效

uni-app onTabItemTap 在App（自定义组件模式）下不生效

示例代码：

onTabItemTap(e) {console.log(“test~~~~”)}


## 操作步骤：

- 点击底部的tabbar onTabItemTap不生效

## 预期结果：

- 会打印出test~~~

## 实际结果：

- 不会打印出test~~~

## bug描述：

- onTabItemTap在页面中点击底部的tabbar不生效
信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Mac
PC系统版本号 MacBook Air (M1, 2020)
HBuilderX类型 Alpha
HBuilderX版本 3.2.6
手机系统 iOS
手机系统版本号 IOS 14
手机厂商 苹果
手机机型 Iphone11
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app onTabItemTap 在App（自定义组件模式）下不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app onTabItemTap 在App（自定义组件模式）下不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在自定义组件模式下，onTabItemTap 确实存在不触发的问题。这通常是由于自定义组件模式与普通模式的生命周期差异导致的。

解决方案：

  1. 使用 uni.onTabBarMidButtonTap 全局监听（推荐）： 在 App.vue 的 onLaunch 中全局监听 tabbar 点击事件：

    onLaunch: function() {
  uni.onTabBarMidButtonTap(() => {
    console.log('tabbar 被点击');
  });
}

  2. 改用页面生命周期监听： 在页面的 onShow 生命周期中判断页面路径：

    onShow() {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  if (currentPage.route === '你的页面路径') {
    console.log('页面显示，可能是tabbar切换触发');
  }
}

  3. 检查 tabbar 配置： 确保 pages.json 中正确配置了 tabBar，且当前页面在 tabBar 的 list 中。

  4. 切换编译模式： 尝试在 manifest.json 中关闭自定义组件模式：

    "app-plus": {
  "usingComponents": false
}
回到顶部