uni-app 动态设置tabbar Bug

uni-app 动态设置tabbar Bug

信息类别 详情
产品分类 uniapp/App
PC开发环境 Windows
版本号 64
HBuilderX 正式
版本号 3.1.22
手机系统 Android
版本号 Android 11
手机厂商 小米
手机机型 小米10
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

  • 动态设置tabbar
  • 先设置路径1、2、3、4、5为tabbar
  • 后动态把5更改为页面6
  • 后续要跳转到页面5 这时会报错 navigateTo:fail can not navigateTo a tabbar page

预期结果：

  • 可以把之前设置的页面移除tabbar

实际结果：

  • 没有移除

bug描述：

  • 动态设置tabbar
  • 先设置路径1、2、3、4、5为tabbar
  • 后动态把5更改为页面6
  • 后续要跳转到页面5 这时会报错 navigateTo:fail can not navigateTo a tabbar page

更多关于uni-app 动态设置tabbar Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

请提供简单、可稳定复现、能直接运行的完整示例（上传附件），方便我们快速排查问题哦。 【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

更多关于uni-app 动态设置tabbar Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已上传，默认tabbar 显示为 page page1 page2 page3 page4。点击更改tabbar，tabbar中的第5个会更改为page5,这时点击跳转 page4（使用uni.navigateTo）uni.navigateTo）会报错

页面绝对路径，必须在 pages 中先定义，被替换掉的 pagePath 不会变成普通页面（仍然需要使用 uni.swichTab 跳转）

那如何判断某个路径是否存在于tabbar 呢

附件

不支持，tabbar页面不能作为普通页使用，需要使用 uni.switchTab跳转

那我可以配置多个吗？要不然还得判断这个页面配置没有

这个问题是由于 uni-app 的 tabBar 动态设置机制导致的。当你使用 uni.setTabBarItem 将页面5从 tabBar 中移除后，uni-app 的页面路由系统可能仍然将页面5识别为 tabBar 页面，导致使用 uni.navigateTo 跳转时出现 can not navigateTo a tabbar page 的错误。

原因分析：

  1. uni.setTabBarItem 主要用于修改 tabBar 某一项的配置（如图标、文字），并不能完全将页面从 tabBar 路由表中移除。
  2. 即使前端 tabBar 显示已更新，底层的路由映射可能未同步更新，页面5仍被识别为 tabBar 页面。

解决方案：

  1. 使用 uni.switchTab 跳转：如果页面5当前仍是 tabBar 页面，应使用 uni.switchTab 进行跳转。
  2. 重新配置 tabBar：如需彻底移除，建议在 pages.json 中重新配置 tabBar 列表，移除页面5，然后动态修改其他项。
  3. 使用条件渲染：通过 v-if 控制 tabBar 显示，结合路由守卫处理跳转逻辑。
  4. 路由跳转前检查：在跳转前判断目标页面是否为当前 tabBar 页面，动态选择 uni.navigateTo 或 uni.switchTab。

示例代码：

// 检查页面是否为当前 tabBar 页面
const isTabBarPage = (path) => {
  const tabBarPages = getCurrentPages().some(page => page.route === path);
  return tabBarPages;
};

// 跳转逻辑
if (isTabBarPage('pages/page5/page5')) {
  uni.switchTab({ url: '/pages/page5/page5' });
} else {
  uni.navigateTo({ url: '/pages/page5/page5' });
}
回到顶部