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 属性，或者使用第三方插件来实现。不同的方法适用于不同的需求，需要根据实际情况来选择。