1. 什么是uniapp顶部导航？
在移动端APP界面设计中，顶部导航栏是常见的一种设计形式。uni-app是基于vue开发的一款跨平台开发工具，类似于React Native，支持一次编写，多端发布，包括iOS，Android，H5，以及Window端等。我们在使用uni-app进行开发时，顶部导航栏也常常需要进行相关的设置。通过设置顶部导航栏，用户能够直观地感受到界面的层次结构，更加方便地操作应用。
2. uniapp设置顶部导航的方式
uni-app提供了多种设置顶部导航的方式，包括使用页面配置文件、使用全局组件、写自己的组件等。这里我们重点介绍如何使用页面配置文件来设置顶部导航栏。
2.1. 使用页面配置文件设置顶部导航
在uni-app中，每个页面都可以独立地进行配置。我们可以通过修改页面配置文件来设置顶部导航栏。以下是设置顶部导航栏的步骤：
在项目目录中打开指定页面的`vue`文件，创建对应的`json`文件。
在创建的`json`文件中添加`navigationBarTitleText`属性，并设置它的值为需要显示的页面标题。
如果需要设置自定义的导航栏颜色、背景、字体等，可以在`json`文件中添加相应的属性。例如，在`json`文件中添加以下属性，就可以设置导航栏颜色为白色，字体颜色为黑色：
{
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black",
}
注意事项：
1. 只有当当前页面属于某个页面栈时，上述设置才会生效。
2. 如果需要设置全局的导航栏颜色等属性，可以使用`app.json`文件。
2.2. 使用全局组件设置顶部导航
除了使用页面配置文件，我们还可以使用全局组件来设置顶部导航栏。以下是设置顶部导航栏的步骤：
在`App.vue`文件中引入`uni-nav-bar`组件，并注册它。
在需要使用顶部导航栏的页面中，在模板区域中添加`uni-nav-bar`组件，并设置相应的属性。
在页面的`script`标签中，设置三个函数，分别为`onNavigationBarButtonTap`、`onNavigationBarSearchInputChanged`、`onNavigationBarSearchInputConfirmed`。这三个函数分别用于处理点击导航栏按钮、输入框输入变化以及输入框确认事件。
<template>
<view class="app">
<uni-nav-bar>
<router-view>
</view>
</template>
<script>
import UniNavBar from "@/components/uni-nav-bar.vue";
export default {
components: { UniNavBar },
onNavigationBarButtonTap() {},
onNavigationBarSearchInputChanged() {},
onNavigationBarSearchInputConfirmed() {},
};
</script>
<template>
<view>
<uni-nav-bar :title="title" :color="color" :background="background">
</view>
</template>
<script>
export default {
data() {
return {
title: "首页",
color: "#666",
background: '#fff',
};
},
};
</script>
3. 如何取消uniapp顶部导航？
有时候，在一些页面中，我们希望取消顶部导航栏，使页面呈现全屏的效果。这时候，我们可以通过设置导航栏的显示隐藏来实现。
3.1. 通过页面配置文件取消顶部导航
在目标页面的配置文件中添加`navigationBarHidden`属性，并将其值设置为`true`。代码示例如下：
{
"navigationBarHidden": true
}
这样，在目标页面的顶部导航栏就会被隐藏，从而实现全屏的效果。
3.2. 使用全局组件取消顶部导航
我们也可以通过在全局组件中设置导航栏的显示隐藏来实现取消顶部导航。以下是具体的步骤：
在`App.vue`中引入`uni-nav-bar`组件，并注册它。
在全局组件的模板区域中，判断当前页面的路由路径，如果是目标页面，则不渲染`uni-nav-bar`组件。代码示例如下：
<template>
<view class="app">
<uni-nav-bar :show="showNav">
<router-view>
</view>
</template>
<script>
import UniNavBar from "@/components/uni-nav-bar.vue";
export default {
components: { UniNavBar },
computed: {
showNav() {
// 判断当前页面路由
return this.$route.path !== "/my-target-page";
},
},
};
</script>
3.3. 在页面中使用全局组件取消顶部导航
如果我们希望只在特定的页面中取消顶部导航时，可以采用在页面中使用全局组件的方式。以下是具体的步骤：
创建一个全局组件（例如，在`src/components`目录下创建`no-navigation-bar.vue`文件），并设置`template`模板为`<view>`，以完全占满页面。
在需要取消顶部导航的页面中，引入`no-navigation-bar`组件。
<template>
<view>
</template>
<template>
<no-navigation-bar>
<view class="my-target-page">
<!-- 页面内容 -->
</view>
</no-navigation-bar>
</template>
4. 总结
通过本文的介绍，我们了解了uniapp设置顶部导航的多种方式，以及如何取消顶部导航，使应用更加灵活多变。通过设置顶部导航栏，我们可以更好地优化应用页面的视觉效果，增加用户体验。