uniapp 打开app默认隐藏tabbar怎么实现

在uniapp中，如何实现在打开APP时默认隐藏底部tabbar？我已经尝试在pages.json里配置"display": “false”，但进入首页时tabbar仍然显示。有没有其他方法可以在特定页面或启动时彻底隐藏tabbar？需要兼容Android和iOS平台。

2 回复

在 pages.json 中，给需要隐藏 tabBar 的页面添加 "style": { "tabBar": { "visible": false } } 即可。


在 UniApp 中，可以通过以下方法实现打开 App 时默认隐藏 TabBar：

方法一：全局配置隐藏（推荐）

在 pages.json 中，将首页的 style 配置为隐藏 TabBar：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "app-plus": {
          "titleNView": false,  // 如果需要自定义导航栏
          "tabBar": {
            "visible": false   // 隐藏 TabBar
          }
        }
      }
    }
  ]
}

方法二：通过 API 动态隐藏

在首页的 onLoad 或 onShow 生命周期中调用隐藏方法：

export default {
  onLoad() {
    // 隐藏 TabBar
    uni.hideTabBar()
  }
}

方法三：条件渲染

在需要隐藏的页面使用 v-if 控制 TabBar 显示状态（需要自定义 TabBar 组件）。

注意事项：

  1. 方法一适用于特定页面永久隐藏 TabBar
  2. 方法二更灵活，可在任意时机调用
  3. 如果需要在其他页面显示 TabBar，可使用 uni.showTabBar()
  4. 在微信小程序中，部分配置可能需要在小程序配置文件里单独设置

显示 TabBar 示例：

// 在其他页面显示 TabBar
uni.showTabBar()

选择方法一配置最简单，方法二控制更灵活。根据实际需求选择即可。

回到顶部