更新记录

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。