uniapp跳转登录页时为什么会出现tabbar？

在使用uniapp开发时，从非tabbar页面跳转到登录页（非tabbar页面），为什么底部tabbar会突然闪现？我确认登录页没有配置在tabbar列表中，但切换时仍会出现tabbar的残留或闪烁现象，该如何彻底隐藏？

2 回复

uniapp跳转登录页时出现tabbar，可能是因为登录页被错误配置为tabbar页面。检查pages.json中tabBar的list列表，确保登录页不在其中。若需隐藏，可使用uni.hideTabBar()方法。


在UniApp中，跳转登录页时出现TabBar通常是因为登录页被错误地配置为TabBar页面，或者跳转方式不正确。以下是常见原因和解决方法：

原因分析：

  1. 登录页被设置为TabBar页面：在 pages.json 的 tabBar 配置中，登录页被列入了 list 数组，导致它显示TabBar。
  2. 使用了 uni.switchTab 跳转：如果使用 uni.switchTab API 跳转到登录页，而登录页是TabBar页面，就会显示TabBar。
  3. 页面路径配置错误：在 pages.json 中，登录页可能被错误地定义为TabBar页面。

解决方法：

  1. 检查并修改 pages.json 配置：

    • 确保登录页不在 tabBar 的 list 中。如果登录页不应显示TabBar，将其从 tabBar 配置中移除。
    • 示例 pages.json 配置：
      {
  "pages": [
    {
      "path": "pages/login/login",
      "style": { ... }
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      // 不要包含登录页
    ]
  }
}

  2. 使用正确的跳转API：

    • 如果登录页不是TabBar页面，使用 uni.navigateTo 或 uni.redirectTo 进行跳转，避免使用 uni.switchTab。
    • 示例代码：
      // 正确：使用 navigateTo 跳转到非TabBar页
uni.navigateTo({
  url: '/pages/login/login'
});

// 错误：如果登录页不是TabBar页，不要用 switchTab
// uni.switchTab({
//   url: '/pages/login/login'
// });

  3. 检查页面路径：

    • 确认跳转时使用的URL路径与 pages.json 中定义的路径一致，避免误指向TabBar页。

总结：

通过调整 pages.json 配置并使用正确的跳转API，可以避免登录页显示TabBar。确保登录页独立于TabBar导航，以提供更好的用户体验。如果问题持续，检查代码逻辑和配置是否有冲突。

回到顶部