uniapp自定义全局顶部导航栏

### 如何在 UniApp 中创建自定义全局顶部导航栏

为了实现在 UniApp 应用中创建自定义全局顶部导航栏，可以通过 `pages.json` 文件中的 `globalStyle` 属性来设置默认的导航栏样式，并利用自定义组件的方式进一步增强其功能和外观。

#### 1. 设置全局导航栏风格

编辑项目的根目录下的 `pages.json` 文件，在其中找到或添加 `globalStyle` 字段并指定 `"navigationStyle": "custom"` 来启用自定义导航栏[^1]：

{
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "",
        "backgroundColorTop": "#ffffff",
        "backgroundColorBottom": "#ffffff",
        "navigationStyle": "custom"
    }
}

此配置使得整个应用内的页面都采用无默认样式的顶部区域，从而允许开发者完全控制该空间的内容展示方式。

#### 2. 开发自定义导航栏组件

接着，创建一个新的 Vue 组件作为通用的顶部导航条。假设命名为 `CustomNavBar.vue`:

<template>
<div class="nav-bar">
    <!-- 自定义内容 -->
</div>
</template>

<script>
export default {
name: 'CustomNavBar',
props: ['title'],
data() {
return {};
},
methods: {}
};
</script>

<style scoped lang="scss">
.nav-bar {
height: 80rpx;
line-height: 80rpx;
text-align: center;
background-color: #fff;
border-bottom: solid 1px #ebebeb;

/* 更多样式 */
}
</style>

上述模板提供了一个简单的 HTML 结构用于放置任何想要显示于屏幕顶端的信息；同时通过 props 接收来自父级作用域传递过来的数据（比如标题），以便灵活调整各个实例的表现形式[^2]。

#### 3. 在各页面引入自定义导航栏

最后一步是在每一个需要使用到这个新设计的地方导入 `<CustomNavBar>` 标签。通常情况下会将其置于每页布局文件最上方的位置，像这样：

<!-- PageA.vue 或其他具体页面 -->
<template>
<view>
    <CustomNavBar :title="'Page A Title'" />
    
    <!-- 页面主体内容 -->

</view>
</template>

<script>
import CustomNavBar from '@/components/CustomNavBar';

export default {
components: { CustomNavBar },
// ...
};
</script>

这样做不仅实现了跨多个视图共享相同的 UI 元素的目标，还简化了维护工作量——只需一处修改就能影响所有关联之处[^4]。