uniapp自定义navigationBar

### 实现自定义 NavigationBar 方法

在 UniApp 中实现自定义 `navigationBar` 可通过隐藏默认的导航栏并创建一个自定义视图来替代。这允许开发者完全掌控导航栏的设计与交互逻辑。

#### 配置全局样式文件

首先，在项目的根目录下的 `pages.json` 文件中配置全局风格，禁用默认的 `navigationBar`：

{
  "globalStyle": {
    "navigationStyle": "custom"
  }
}

此操作会移除所有页面上的默认顶部导航条[^1]。

#### 创建自定义导航栏组件

接着，构建一个新的 Vue 组件用于表示定制化的头部区域。下面是一个简单的例子展示如何设计这个组件 (`components/CustomNav.vue`)：

<template>
  <view class="nav-bar">
    <!-- 左侧返回图标 -->
    <image @click="goBack" src="/static/back.png"></image>

    <!-- 中间标题文字 -->
    <text>{{ title }}</text>

    <!-- 右边更多选项菜单 -->
    <button open-type="contact">联系客服</button>
  </view>
</template>

<script>
export default {
  props: ['title'],
  methods: {
    goBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style scoped>
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  background-color: #fff;
}

/* 更多样式可以根据实际需求添加 */
</style>

在此模板里，左侧放置了一个点击事件绑定到 `goBack()` 函数以便处理用户的回退动作；中间部分显示当前页面名称作为标题；右侧则提供了一种方式让用户能够访问额外的功能或服务链接[^3]。

#### 获取状态栏和导航栏的高度

为了使自定义导航栏能正确占据屏幕顶端的位置而不被系统状态栏遮挡，还需要获取设备的状态栏以及胶囊按钮的信息。这部分工作可以在项目中的某个公共 JavaScript 文件(`common/system.js`)完成:

// common/system.js
const SYSTEM_INFO = uni.getSystemInfoSync();

// 手机状态栏高度
export function getStatusBarHeight() {
  return SYSTEM_INFO.statusBarHeight || 20;
}

// 导航栏高度
export function getNavBarHeight() {
  if (uni.getMenuButtonBoundingClientRect) {
    const rect = uni.getMenuButtonBoundingClientRect();
    return (
      rect.height +
      (rect.top - SYSTEM_INFO.statusBarHeight) * 2 // 按 rpx 计算故*2
    );
  } else {
    return 48;
  }
}

// 填充块总高度
export function getTotalPaddingTop() {
  return getStatusBarHeight() + getNavBarHeight();
}

这些函数可以帮助我们动态适应不同的手机型号及其物理特性。

#### 应用至具体页面

最后一步是在具体的页面布局中引入刚才制作好的自定义导航栏组件，并调用之前定义的方法来设置合适的内边距(top padding)，从而确保内容不会被系统的状态栏所掩盖。

<!-- pages/home/home.vue -->
<template>
  <block>
    <!-- 自定义导航栏 -->
    <custom-nav :title="'首页'" />

    <!-- 页面主体内容区 -->
    <scroll-view scroll-y style="height: calc(100vh - {{totalPadding}})">
      <!-- 主体内容... -->
    </scroll-view>
  </block>
</template>

<script>
import CustomNav from '@/components/CustomNav';
import { getTotalPaddingTop } from '@/common/system';

export default {
  components: { CustomNav },
  data() {
    return {
      totalPadding: `${getTotalPaddingTop()}rpx`,
    };
  },
};
</script>

这样就完成了整个流程——从隐藏标准导航栏到建立自己的可编程版本。