uni-halo/.agents/skills/uniapp-project/references/components/uni-ui/uni-nav-bar.md

uni-nav-bar

Instructions

组件名：uni-nav-bar

代码块： uNavBar

点击下载&安装

Syntax

• 使用 <uni-nav-bar />（或 <uni-nav-bar></uni-nav-bar>，当需要包裹子节点时）。
• 遇到平台差异时，建议使用条件编译（#ifdef / #endif）显式处理。

Properties

属性名	类型	默认值	说明
title	String	-	标题文字
leftText	String	-	左侧按钮文本
rightText	String	-	右侧按钮文本
leftIcon	String	-	左侧按钮图标（图标类型参考 Icon 图标 type 属性）
rightIcon	String	-	右侧按钮图标（图标类型参考 Icon 图标 type 属性）
color	String	#000000	图标和文字颜色
backgroundColor	String	#FFFFFF	导航栏背景颜色
fixed	Boolean	false	是否固定顶部
statusBar	Boolean	false	是否包含状态栏
shadow	Boolean	false	导航栏下是否有阴影
border	Boolean	true	导航栏下是否有边框
height	Number/String	44	导航栏高度
dark	Boolean	false	导航栏开启暗黑模式
leftWidth	Number/String	120rpx	导航栏左侧插槽宽度
rightWidth	Number/String	120rpx	导航栏右侧插槽宽度
stat	Boolean		是否开启统计标题功能。 注意：只有使用 title 属性 ，且开启了统计功能才生效
showMenuButtonWidth	Boolean	false	微信小程序是否开启胶囊避让功能，fixed:true 下生效。 注意：开启后会导致标题不在页面水平居中，如需使用右插槽请开启，不开启下，右侧插槽或者内容会被胶囊按钮覆盖

Events

事件名	说明	返回值
@clickLeft	左侧按钮点击时触发	-
@clickRight	右侧按钮点击时触发	-

Platform Compatibility

See official docs for platform support table: https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html

Examples

Example (Example 1)

<uni-nav-bar title="导航栏组件"></uni-nav-bar>

Example (Example 2)

<uni-nav-bar title="导航栏组件"></uni-nav-bar>

Example (Example 3)

<uni-nav-bar shadow title="导航栏组件"></uni-nav-bar>

Example (Example 4)

<uni-nav-bar shadow title="导航栏组件"></uni-nav-bar>

Example (Example 5)

<uni-nav-bar dark title="导航栏组件"></uni-nav-bar>

Example (Example 6)

<uni-nav-bar dark title="导航栏组件"></uni-nav-bar>

Reference:

• Official Documentation
• Plugin Marketplace
• Local Example