更新记录
1.0.0(2026-03-19)
下载此版本
初始版本发布
平台兼容性
uni-app(5.0)
| Vue2 |
Vue3 |
Vue3插件版本 |
Chrome |
Safari |
app-vue |
app-vue插件版本 |
app-nvue |
Android |
iOS |
鸿蒙 |
| - |
√ |
1.0.0 |
- |
- |
√ |
1.0.0 |
- |
- |
- |
- |
| 微信小程序 |
微信小程序插件版本 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
小红书小程序 |
快应用-华为 |
快应用-联盟 |
| 3.15.0 |
1.0.0 |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
uni-app x(5.0)
| Chrome |
Safari |
Android |
iOS |
鸿蒙 |
微信小程序 |
微信小程序插件版本 |
| - |
- |
- |
- |
- |
3.15.0 |
1.0.0 |
carson-navbar
导航栏组件,支持自定义标题、左侧返回、右侧按钮等功能。
使用方式
<template>
<view>
<carson-navbar title="页面标题" />
</view>
</template>
属性说明
| 属性名 |
类型 |
默认值 |
说明 |
| title |
String |
'' |
导航栏标题 |
| safeAreaInsetTop |
Boolean |
true |
是否显示状态栏占位 |
| placeholder |
Boolean |
false |
是否显示占位符 |
| fixed |
Boolean |
true |
是否固定在顶部 |
| border |
Boolean |
false |
是否显示下边框 |
| leftIcon |
String |
'/static/home/back.png' |
左侧图标路径 |
| leftText |
String |
'' |
左侧文字 |
| rightText |
String |
'' |
右侧文字 |
| rightIcon |
String |
'/static/home/settings.png' |
右侧图标路径 |
| bgColor |
String |
'#ffffff' |
导航栏背景颜色 |
| titleWidth |
String/Number |
'400rpx' |
标题最大宽度 |
| height |
String/Number |
'88rpx' |
导航栏高度 |
| leftIconSize |
String/Number |
'64rpx' |
左侧图标大小 |
| leftIconColor |
String |
'#303133' |
左侧图标颜色 |
| rightIconSize |
String/Number |
'64rpx' |
右侧图标大小 |
| rightIconColor |
String |
'#303133' |
右侧图标颜色 |
| autoBack |
Boolean |
true |
点击左侧是否自动返回 |
| titleStyle |
Object |
{} |
标题自定义样式 |
事件说明
| 事件名 |
说明 |
参数 |
| leftClick |
左侧点击事件 |
- |
| rightClick |
右侧点击事件 |
- |
插槽说明
| 插槽名 |
说明 |
| left |
左侧自定义内容 |
| center |
中间自定义内容 |
| right |
右侧自定义内容 |
代码示例
基础使用
<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" />