CNavCustomBar 自定义导航条

功能说明

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

引用方式

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

组件参数

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

实例方法

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

使用示例

基础用法

<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>

自定义图标

<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 时生效