导航栏组件 (c-navBar)

导航栏组件提供了自定义的页面顶部导航栏，支持自定义标题、背景色、状态栏高度等功能，可以替代原生导航栏。

基本用法

<template>
  <view>
    <c-navBar title="页面标题"></c-navBar>
    <view class="content">
      <!-- 页面内容 -->
    </view>
  </view>
</template>

自定义返回按钮

<template>
  <view>
    <c-navBar title="详情页" :isBack="true"></c-navBar>
  </view>
</template>

自定义样式

<template>
  <view>
    <c-navBar 
      title="自定义导航" 
      color="#ffffff" 
      backgroundColor="#007AFF" 
      :isBack="true"
    ></c-navBar>
  </view>
</template>

自定义右侧内容

<template>
  <view>
    <c-navBar title="带右侧按钮" :showRight="true">
      <template #right>
        <view class="right-btn" @click="onRightClick">
          <u-icon name="share" color="#333" size="20"></u-icon>
        </view>
      </template>
    </c-navBar>
  </view>
</template>

<script>
export default {
  methods: {
    onRightClick() {
      // 处理右侧按钮点击
      uni.showToast({
        title: '点击了右侧按钮'
      });
    }
  }
}
</script>

完全自定义导航栏

<template>
  <view>
    <c-navBar :custom="true">
      <view class="custom-nav">
        <view class="left" @click="goBack">返回</view>
        <view class="center">自定义导航栏</view>
        <view class="right">
          <u-icon name="search" size="22"></u-icon>
        </view>
      </view>
    </c-navBar>
  </view>
</template>

<script>
export default {
  methods: {
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  height: 100%;
  
  .left, .right {
    width: 80rpx;
  }
  
  .center {
    flex: 1;
    text-align: center;
    font-weight: bold;
  }
}
</style>

属性说明

属性名	类型	默认值	说明
title	String	"头部导航栏文字"	头部导航栏文字
color	String	"#000"	头部导航栏文字颜色
isBack	Boolean	false	是否显示左侧返回按钮
isSeat	Boolean	false	是否透视背景(脱离文档流)
isPerch	Boolean	false	是否占位
isTran	Boolean	false	是否透明
custom	Boolean	false	自定义头部
leftFn	Boolean	false	是否自定义左侧按钮事件
showRight	Boolean	false	是否显示右侧插槽
backgroundColor	String	""	背景颜色
type	Number	0	导航栏类型

事件说明

事件名	说明	回调参数
leftFn	当 leftFn 属性为 true 时，点击左侧按钮触发此事件	-

插槽

插槽名	说明
right	右侧内容插槽，showRight 为 true 时生效
default	自定义整个导航栏内容（当 custom 为 true 时生效）

自动适配

组件会自动获取并适配不同平台的状态栏和导航栏高度：

• 状态栏高度：通过 uni.getSystemInfoSync().safeArea.top 获取
• 标题栏高度：
  • App 端固定为 46px
  • 小程序端根据胶囊按钮位置自动计算

样式特点

• 导航栏默认固定定位，z-index 为 10
• 标题居中显示，字体大小 36rpx，字体粗细为 bold
• 左侧返回按钮宽高为 60rpx，图标大小为 18px
• 右侧插槽位置在不同平台有不同位置：
  • 小程序端：距右侧 200rpx
  • App 端：距右侧 30rpx

注意事项

1. 组件会自动获取状态栏高度，适配不同机型
2. 导航栏默认使用固定定位(fixed)，如需改变，可设置 isSeat 属性为 true
3. 如果需要导航栏下方内容不被遮挡，可以设置 isPerch 属性为 true，会自动添加与导航栏等高的占位元素
4. 当 leftFn 属性为 true 时，点击返回按钮不会自动返回，而是触发 leftFn 事件
5. 默认返回逻辑：先尝试返回上一页，如果失败则跳转到首页 "/pages/tabbar/home"
6. 完全自定义导航栏时，需要设置 custom 属性为 true，并使用默认插槽提供内容
7. 背景色为空字符串时会使用默认白色背景