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

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

开发环境 版本号 项目创建方式
Mac MacBook Air (M1, 2020) HBuilderX 
产品分类：uniapp/App
PC开发环境操作系统：Mac
PC开发环境操作系统版本号：MacBook Air (M1, 2020)
HBuilderX类型：正式
HBuilderX版本号：3.2.2
手机系统：iOS
手机系统版本号：IOS 14
手机厂商：苹果
手机机型：Iphone11
页面类型：vue
打包方式：云端
项目创建方式：HBuilderX

示例代码：

onTabItemTap(e) {console.log("test~~~~")}

操作步骤：

点击首页底部的tabbar

预期结果：

应该能打印出来信息是test~~~~，

实际结果：

现在打印没生效，没走到onTabItemTap()

bug描述：

onTabItemTap 在App（自定义组件模式）不生效

更多关于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


根据你的描述，这是一个已知的uni-app在自定义组件模式下的兼容性问题。onTabItemTap生命周期在App平台的自定义组件模式中确实存在不触发的情况。

主要原因： 在自定义组件模式下，tabbar页面的生命周期管理机制与普通页面有所不同，导致onTabItemTap事件未能正确绑定和触发。

解决方案：

  1. 临时解决方案（推荐）： 使用uni.onTabBarMidButtonTap或监听页面切换事件作为替代：

    // 在页面onLoad中监听
onLoad() {
  uni.onTabBarMidButtonTap(() => {
    console.log('tabbar中间按钮点击')
  })
  
  // 或者监听页面切换
  uni.onAppRoute((res) => {
    if (res.path === '你的页面路径') {
      console.log('切换到当前tab页')
    }
  })
}

  2. 检查编译模式： 确认HBuilderX中是否启用了自定义组件模式。可以在manifest.json的app-plus节点下检查：

    "app-plus": {
  "usingComponents": true
}

    如果不需要自定义组件特性，可以尝试关闭此选项。

  3. 使用页面生命周期替代： 对于tabbar页面切换的监听，可以考虑使用onShow生命周期配合路由判断：

    onShow() {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  if (currentPage.route === 'pages/your-tab-page/your-tab-page') {
    console.log('tab页面显示')
  }
}
回到顶部