uniapp如何隐藏tabbar

在uniapp开发中，如何动态隐藏特定页面的tabbar？我在使用uni.hideTabBar()方法时发现效果不稳定，有时切换页面后tabbar会重新出现。请问有没有更可靠的实现方案？比如通过配置pages.json或全局样式控制？需要兼容iOS和Android平台。

2 回复

在需要隐藏的页面中，使用 uni.hideTabBar() 方法即可隐藏底部tabbar。


在 UniApp 中，可以通过以下方法隐藏 TabBar：

1. 全局隐藏（适用于所有页面）

在 pages.json 中设置 tabBar 的 display 为 false：

{
  "tabBar": {
    "display": false
  }
}

2. 局部隐藏（针对特定页面）

在 pages.json 中为需要隐藏 TabBar 的页面添加 "style" 配置：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "enablePullDownRefresh": false,
        "app-plus": {
          "titleNView": false,
          "tabBar": {
            "visible": false
          }
        }
      }
    }
  ]
}

3. 动态隐藏（通过代码控制）

使用 uni.hideTabBar() 方法：

// 隐藏 TabBar
uni.hideTabBar({
  animation: false // 可选，是否使用动画效果
});

// 显示 TabBar
uni.showTabBar({
  animation: true
});

注意事项：

  • 平台差异：app-plus 配置仅适用于 App 平台，H5 和小程序需使用其他方法。
  • 页面跳转：若通过 uni.switchTab 跳转，TabBar 会自动显示，需避免在此类页面隐藏。

根据需求选择合适的方法即可。

回到顶部