uniapp启动时登录页下面的tabbar还在怎么解决？

在uniapp中，启动时登录页下方仍然显示tabbar，应该如何隐藏？我已经在pages.json中配置了登录页为首页，但tabbar依然存在。尝试过设置"tabBar": {“list”: []}也没效果。请问正确的解决方法是什么？需要修改哪个配置项才能彻底隐藏登录页的底部导航栏？

2 回复

在App.vue的onLaunch中判断当前页面，如果是登录页就隐藏tabbar，使用uni.hideTabBar()。登录成功后跳转首页再显示tabbar。


在 UniApp 中，登录页下方的 TabBar 仍然显示，通常是因为登录页被配置为 TabBar 页面之一。以下是解决方法：

解决方案

  1. 检查页面配置：确保登录页不在 pages.json 的 tabBar 配置的 list 数组中。

    • 如果登录页在 list 中，将其移除。

  2. 调整页面路径：

    • 将登录页设置为非 TabBar 页面，例如放在 pages 数组的普通页面位置。
    • 登录成功后，使用 uni.switchTab 跳转到 TabBar 页面。

示例代码

在 pages.json 中配置：

{
  "pages": [
    {
      "path": "pages/login/login",
      "style": {
        "navigationBarTitleText": "登录"
      }
    },
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      }
    ]
  }
}

在登录页的登录成功逻辑中：

// 登录成功后跳转到 TabBar 页面
uni.switchTab({
  url: '/pages/index/index'
});

注意事项

  • 确保登录页路径不在 tabBar.list 中。
  • 使用 uni.switchTab 跳转时，目标页面必须是 TabBar 页面。

通过以上调整，启动时登录页将不再显示 TabBar。

回到顶部