uniapp如何去掉原生导航栏

1. Uniapp原生导航栏介绍

在 Uniapp 中，原生导航栏是指应用在页面顶部位置的系统默认导航栏，通常包含了标题、返回按钮、菜单、搜索栏等等。

2. 为什么要去掉原生导航栏

有时候我们可能需要自定义顶部导航栏，例如设计页面风格需要，或者用到了第三方的导航栏组件等，此时就需要去掉原生导航栏。

3. 如何去掉原生导航栏

在 Uniapp 中，我们可以通过以下方法去掉原生导航栏。

3.1 在页面配置文件中去除导航栏

在页面的配置文件中可以设置导航栏的一些属性，例如标题、背景色、文字颜色等等。而要去掉导航栏，只需将 navigationStyle 属性设置为 custom。

{
  "navigationStyle": "custom"
}

注意，使用该方法去除导航栏后，你将无法获取到系统导航栏的高度，也无法使用系统自带的返回按钮等功能。

3.2 在App全局配置文件中去除导航栏

如果你需要在全局范围内去除导航栏，可以在 App.vue 文件中进行设置。具体做法是在该文件中的全局配置对象中设置如下代码：

export default {
  config: {
    "pages": [
      "pages/home/Home"
    ],
    "window": {
      "backgroundTextStyle": "light",
      "navigationBarBackgroundColor": "#fff",
      "navigationBarTitleText": "demo",
      "navigationBarTextStyle": "black",
      "navigationStyle": "custom"   // 去除原生导航栏
    },
    "tabBar": {
      "selectedColor": "#007aff",
      "color": "#666",
      "list": [
        {
          "pagePath": "pages/home/Home",
          "text": "首页",
          "iconPath": "/static/tabbar/home.png",
          "selectedIconPath": "/static/tabbar/home-selected.png"
        },
        // ...
      ]
    },
    "networkTimeout": {
      "request": 10000,
      "downloadFile": 10000
    },
    "debug": false
  },
  // ...
}

使用该方法去除导航栏后，所有的页面将都没有原生导航栏。

3.3 通过第三方插件去除导航栏

如果你想要自定义导航栏的样式，可以使用第三方插件来实现。例如 uni-simple-nav 插件就提供了一种简单的方法来自定义导航栏样式。

具体使用方式如下：

1. 首先安装该插件：

npm install uni-simple-nav

2. 在使用的页面中 import 导航栏组件，并替换掉原来的导航栏。

<template>
  <view class="page">
    <uni-simple-nav title="自定义导航栏"></uni-simple-nav>
    <view class="content">
      <!-- 页面主体内容 -->
    </view>
  </view>
</template>
<script>
  import UniSimpleNav from "@/components/uni-simple-nav/uni-simple-nav.vue";
  export default {
    components: {
      UniSimpleNav    // 注册组件
    }
  }
</script>
<style>
  /* 样式表 */
</style>

使用 uni-simple-nav 插件后，你将可以自由控制导航栏的样式、按钮、事件等等。具体 API 可以参考官方文档。

4. 总结

在 Uniapp 中，去掉原生导航栏可以通过在页面或全局配置文件中设置 navigationStyle 属性，或者使用第三方插件来实现。不同的方法适用于不同的需求，需要根据实际情况来选择。