自定义导航栏 (Navbar) 使用指南

本项目提供了封装好的通用导航栏组件 hr-navbar，同时也支持针对特殊场景（如透明渐变、复杂布局）开发完全自定义的导航栏。

1. 通用导航栏 (hr-navbar)

hr-navbar 是项目中的标准导航栏组件，基于 wot-design-uni 的 wd-navbar 封装，增加了自动判断返回/回首页的逻辑。

1.1 基础用法

在页面中直接引入使用：

<template>
  <view>
    <!-- 基础用法 -->
    <hr-navbar title="页面标题" />
    
    <!-- 页面内容 -->
  </view>
</template>

1.2 属性说明 (Props)

属性	类型	默认值	说明
title	string	''	导航栏标题
bordered	boolean	true	是否显示下边框
leftArrow	boolean	true	是否显示左侧返回/主页图标

1.3 核心逻辑

组件会自动检测页面栈深度：

• 返回上一页: 当页面栈深度 > 1 时，点击左侧图标执行 router.back()。
• 返回首页: 当页面栈深度 <= 1 (或在登录页) 时，点击左侧图标跳转到首页 (home Tab)。
• 图标自动切换: 自动显示 < (返回) 或 首页 图标。

1.4 源码位置

src/components/hr-navbar/index.vue

---

2. 进阶：完全自定义导航栏

对于需要特殊交互（如滚动渐变、透明背景）的场景，建议参考商品详情页的实现方式，不使用 wd-navbar，而是手写布局。

2.1 核心要素

自定义导航栏需要处理好以下几个关键点：

1. 固定定位: position: fixed; top: 0; left: 0; z-index: 99;
2. 状态栏高度: 需要预留系统状态栏的高度。
3. 胶囊按钮对齐: (小程序端) 需确保内容不被右上角的胶囊按钮遮挡。

2.2 实现示例 (参考 GoodsNavbar)

参考文件：src/sub-pages/product/goods-detail/components/GoodsNavbar.vue

<script setup lang="ts">
import { computed } from 'vue'

// 获取系统状态栏高度
const { statusBarHeight } = uni.getSystemInfoSync()

// 动态计算顶部内边距
const navbarStyle = computed(() => ({
  paddingTop: `${statusBarHeight}px`,
  height: `${44 + statusBarHeight}px` // 44px 为导航栏标准内容高度
}))
</script>

<template>
  <!-- 占位符，防止内容被遮挡 -->
  <view :style="{ height: navbarStyle.height }"></view>

  <!-- 固定定位的导航栏 -->
  <view class="custom-navbar" :style="navbarStyle">
    <view class="content">
      <view class="left">返回</view>
      <view class="center">标题</view>
    </view>
  </view>
</template>

<style scoped>
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  background-color: white; /* 或 transparent */
}
.content {
  height: 44px; /* 标准导航栏高度 */
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

2.3 沉浸式/透明渐变效果

如果需要实现“页面滚动时导航栏从透明变为白色”的效果：

1. 页面配置: 在 pages.json 中设置 "navigationStyle": "custom"。
2. 监听滚动: 使用 onPageScroll 监听页面滚动距离。
3. 动态样式: 计算透明度 opacity 并绑定到导航栏背景色上。

// 示例逻辑
onPageScroll((e) => {
  const scrollTop = e.scrollTop
  // 滚动超过 100px 完全显示，否则按比例透明
  opacity.value = Math.min(scrollTop / 100, 1)
})

3. 注意事项

• 占位高度: 使用固定定位 (fixed) 的导航栏脱离了文档流，务必在页面顶部添加一个等高的占位元素，否则页面顶部内容会被遮挡。wd-navbar 组件通过 placeholder 属性自动处理了这一点。
• 安全区域: 务必使用 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度，确保适配刘海屏。