更新记录

1.0.3（2026-06-11） 下载此版本

修改样式

1.0.2（2026-05-13） 下载此版本

拆分占位符

1.0.1（2026-05-11） 下载此版本

引入工具函数

平台兼容性

uni-app(5.0)

uni-app x(5.0)

carson-navbar

导航栏组件，支持自定义标题、左侧返回、右侧按钮等功能，包含独立的占位符组件用于页面内容定位。

使用方式

<template>
  <view>
    <carson-navbar title="页面标题" />
    <!-- 页面内容 -->
  </view>
</template>

属性说明

事件说明

插槽说明

子组件

carson-navbar-placeholder

独立的导航栏占位符组件，用于占据导航栏高度空间，防止页面内容被固定导航栏遮挡。

属性说明：

使用示例：

<!-- 方式一：通过导航栏组件自动生成 -->
<carson-navbar title="页面标题" :placeholder="true" />

<!-- 方式二：独立使用 -->
<carson-navbar title="页面标题" />
<carson-navbar-placeholder />

代码示例

基础使用

<carson-navbar title="页面标题" />

自定义左右侧内容

<carson-navbar title="页面标题">
  <template #left>
    <text>返回</text>
  </template>
  <template #right>
    <text>分享</text>
  </template>
</carson-navbar>

显示占位符

<carson-navbar title="页面标题" :placeholder="true" />

自定义背景色

<carson-navbar title="页面标题" bg-color="#1890ff" />

使用透明背景

<carson-navbar 
  title="页面标题" 
  bg-color="transparent" 
  :placeholder="true" 
/>

自定义导航栏高度

<!-- 使用数字格式 -->
<carson-navbar title="页面标题" :height="100" />

<!-- 使用字符串格式 -->
<carson-navbar title="页面标题" height="100rpx" />

注意事项

1. 当设置 fixed: true 时，建议同时设置 placeholder: true，以防止页面内容被导航栏遮挡
2. height 属性支持数字和字符串格式，内部会自动转换为实际像素值
3. 导航栏高度计算使用 carson-tools 工具库，确保在不同设备上的高度一致性

依赖

本组件依赖 carson-tools 工具库进行高度计算：

import { getContentHeight, getNavbarHeight } from '@/uni_modules/carson-tools/index.js';

更新日志

1.1.0

• 新增独立占位符组件 carson-navbar-placeholder
• 支持自定义导航栏高度
• 统一使用 carson-tools 工具库进行高度计算
• height 属性支持数字和字符串两种格式

1.0.0

• 初始版本
• 支持自定义标题、左右侧内容
• 支持插槽自定义
• 支持占位符功能