uniapp 在其他页面如何显示tabbar

在uniapp开发中，我在非tabbar配置的页面需要显示底部导航栏，应该怎么实现？比如从首页跳转到详情页时，希望底部tabbar仍然保持显示。尝试过修改pages.json的配置但没成功，请问正确的实现方式是什么？需要调用特定API还是有什么配置技巧？

2 回复

在需要显示tabbar的页面，配置"tabBar"字段，并在pages.json中设置"custom": false。确保页面路径在tabBar的list数组中。


在 UniApp 中，要在其他页面显示 TabBar，需确保页面路径在 pages.json 中配置为 TabBar 页面。以下是具体步骤：

  1. 配置 pages.json：在 tabBar 的 list 数组中添加页面路径，并设置图标和文字。
  2. 跳转到 TabBar 页面：使用 uni.switchTab 方法导航，TabBar 会自动显示。

示例代码：

在 pages.json 中配置 TabBar：

{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "我的"
      }
    ]
  }
}

在非 TabBar 页面（如普通页面）跳转：

// 通过按钮或事件触发跳转
uni.switchTab({
  url: '/pages/index/index'  // 确保路径在 tabBar 的 list 中
});

注意事项：

  • 只有 tabBar 配置的页面才会显示 TabBar。
  • 使用 uni.navigateTo 或 uni.redirectTo 跳转不会显示 TabBar，必须用 uni.switchTab。
  • 如果页面未显示 TabBar，检查路径是否在 list 中且拼写正确。

通过以上配置和跳转方法，即可在其他页面操作后显示 TabBar。

回到顶部