uniapp页面没有tabbar怎么办

1. 问题描述

在使用 uniapp 进行开发时，我们可能会遇到一个问题，即某些页面没有 tabbar。这个问题在某些场景下很常见，例如某个页面是APP登录后的第一个页面，需要隐藏底部导航栏等情况。本文将介绍解决方案。

2. 解决方案

2.1 方案一：使用全局配置

我们可以通过在 `App.vue` 中配置全局 `tabBar`，来控制页面的底部导航栏是否显示。以下是示例代码：

// App.vue
export default {
  // ...
  tabBar: {
    // 配置底部导航栏的内容
    list: [
      {
        pagePath: '/pages/tabbar/home',
        text: '首页',
        iconPath: '/static/tabbar/home.png',
        selectedIconPath: '/static/tabbar/home-active.png'
      },
      {
        pagePath: '/pages/tabbar/mine',
        text: '我的',
        iconPath: '/static/tabbar/mine.png',
        selectedIconPath: '/static/tabbar/mine-active.png'
      }
    ]
  }
  // ...
}

以上代码示例中，我们在 `App.vue` 的 `tabBar` 中配置了两个底部导航栏的按钮，它们分别指向 `/pages/tabbar/home` 和 `/pages/tabbar/mine` 这两个页面。

如果某个页面不需要显示底部导航栏，我们可以在这个页面对应的 `.vue` 文件中设置 `navigationBarTitleText` 属性为 `false`。

以下是示例代码：

// SomePage.vue
export default {
  // ...
  onLoad() {
    uni.setNavigationBarTitle({
      title: '页面标题'
    })
  }
  // ...
}

如果我们将 `title` 的值改为 `false`，那么这个页面将没有底部导航栏。修改后的代码如下：

// SomePage.vue
export default {
  // ...
  onLoad() {
    uni.setNavigationBarTitle({
      title: false
    })
  }
  // ...
}

2.2 方案二：使用条件编译

另一种解决方法是使用条件编译。我们可以在编译某个页面时，根据宏变量来判断是否需要显示底部导航栏。

以下是示例代码：

// SomePage.vue
<template>
  <!-- 如果宏变量 SHOW_TAB_BAR 为真，则显示底部导航栏 -->
  <div v-if="SHOW_TAB_BAR">
    底部导航栏内容
  </div>
</template>
<script>
  export default {
    // ...
  }
</script>
<style>
  /* 底部导航栏的样式 */
</style>

在编译时，我们可以通过设置宏变量 `SHOW_TAB_BAR` 的值来控制是否显示底部导航栏。以下是命令示例：

# 显示底部导航栏
$ npm run dev -- --env SHOW_TAB_BAR=true
# 隐藏底部导航栏
$ npm run dev -- --env SHOW_TAB_BAR=false

3. 总结

本文介绍了两种解决方案来解决 uniapp 页面没有底部导航栏的问题。我们可以通过全局配置和条件编译两种方法来实现这个功能。同时我们也注意到了，通过全局配置的方式可以在所有页面中使用，而条件编译的方式只能在某些页面中使用，具体使用哪种方法需要根据具体情况而定。

总的来说，掌握这些方法可以让我们更好的使用 uniapp 进行开发。