# CNavCustomBar 自定义导航条

## 功能说明

自定义导航条组件，用于在页面顶部显示导航信息，可以自动适配不同设备的状态栏高度，支持显示返回按钮和标题。

## 引用方式

```js
import CNavCustomBar from '@components/layout/navCustomBar';
```

## 组件参数

- `isNeedBackIcon` (Boolean，可选)：是否需要显示返回按钮，默认值为 false
- `title` (String，可选)：导航栏标题文本，默认值为空字符串

## 实例方法

- `$getStatusBarHeight()`：获取状态栏高度
- `$getNavBarHeight()`：获取导航栏的总高度（包括状态栏）

## 使用示例

### 基础用法

```html
<template>
  <view class="page">
    <CNavCustomBar 
      title="页面标题" 
      :isNeedBackIcon="true" 
    />
    <view class="content" :style="{paddingTop: navBarHeight + 'px'}">
      <!-- 页面内容 -->
    </view>
  </view>
</template>

<script>
import CNavCustomBar from '@components/layout/navCustomBar';

export default {
  components: {
    CNavCustomBar
  },
  data() {
    return {
      navBarHeight: 0
    }
  },
  mounted() {
    this.navBarHeight = this.$refs.navBar.$getNavBarHeight();
  }
}
</script>
```

### 自定义图标

```html
<template>
  <view class="page">
    <CNavCustomBar title="首页">
      <template #icon>
        <image class="menu-icon" src="../assets/menu.png" />
      </template>
    </CNavCustomBar>
  </view>
</template>
```

## 注意事项

1. 组件使用固定定位显示在页面顶部，使用时需要给内容区域设置上内边距，值为导航栏高度，可通过 `$getNavBarHeight()` 方法获取
2. 组件会自动适配不同设备的状态栏高度
3. 当 `isNeedBackIcon` 为 true 时，点击返回按钮默认执行 Taro.navigateBack({ delta: 1 })
4. 可以通过具名插槽 "icon" 自定义左侧图标，但仅在 isNeedBackIcon 为 false 时生效

<!-- 作者：chensi -->