组件名：uni-nav-bar

代码块： uNavBar

点击下载&安装

导航栏组件，主要用于头部导航。

介绍

注意事项

为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。

• 组件需要依赖 sass 插件 ，请根据提示自行手动安装
• 组件内部依赖 'uni-icons' 组件
• 请勿在组件内部使用，宽度可能会发生错误
• 当前组件不支持文字大小的修改 ，如有需要请使用深度选择器覆盖样式

基本用法

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

开启阴影

使用 shadow 属性开启导航栏阴影

Tips:

• nvue 下某些机型可能显示不正常 ，建议 nvue 下关闭阴影

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

开启暗黑主题

使用 dark 属性开启导航栏的暗黑主题

Tips:

• 暗黑主题只会改变组件默认的前景色和背景色，如果设置自定义颜色，自定义颜色将优先显示

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

自定义颜色

使用 color 属性修改导航栏前景色（文字图标颜色）

使用 background-color 属性修改导航栏背景色

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

带左右文字

使用 left-text 属性设置导航栏左侧文字

使用 right-text 属性设置导航栏右侧文字

Tips:

• 图标依赖 uni-icons 组件 ，可用图标类型参考 uni-icons 示例

<uni-nav-bar left-text="返回" right-text="设置" title="标题" />

带左右图标

使用 left-icon 属性设置导航栏左侧图标

使用 right-icon 属性设置导航栏右侧图标

Tips:

• 图标依赖 uni-icons 组件 ，可用图标类型参考 uni-icons 示例
• right-text 和 right-icon 属性不能同时存在，如需都使用，请使用 right 插槽自定义

<uni-nav-bar left-icon="left" right-icon="cart" title="标题" />

自定义高度

使用 height 属性设置导航栏高度

Tips:

• 组件默认高度为44px
• 如使用 Number 类型传值默认单位为 px，使用 String 类型传值则必须带单位，如传值无效 ，则使用默认值

<uni-nav-bar height="120rpx" title="自定义高度" />

API

NavBar Props

属性名	类型	默认值	说明
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/String	120rpx	是否开启统计标题功能。注意：只有使用title 属性 ，且开启了统计功能才生效

Tips

• leftWidth 和 rightWidth 如无必要不需要设置
• leftWidth 和 rightWidth 如需设置 ，只有两个值相同，才能保证 title 居中 ，如设置值过大，需要注意到 title 被覆盖的可能

NavBar Slots

支持向 NavBar 里插入不同内容，以达到自定义的目的。

slot名	说明
default	向导航栏中间插入
left	向导航栏左侧插入
right	向导航栏右侧插入

<uni-nav-bar>
    <view>标题栏</view>
    <view v-slot:left>left</view>
    <view v-slot:right>right</view>
</uni-nav-bar>

NavBar Events

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

示例

注意

示例依赖了 uni-card uni-section uni-scss 等多个组件，直接拷贝示例代码将无法正常运行 。

请到 组件下载页面 ，在页面右侧选择 使用 HBuilderX导入示例项目 ，体验完整组件示例。

Template

Script

Style

<template>
	<view class="container">
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
			title="自定义导航栏" @clickLeft="back" />
		<uni-card is-full :isShadow="false">
			<text
				class="uni-h6">本导航栏为自定义组件，并非原生导航栏。除非原生导航栏无法满足需求，否则不推荐使用自定义导航栏组件。具体参考https://ask.dcloud.net.cn/article/34921</text>
		</uni-card>
		<uni-section title="基本用法" subTitle="使用 title 属性设置导航栏标题" type="line" style="margin-bottom: 3px;">
			<view class="box-bg">
				<uni-nav-bar title="标题" />
			</view>
		</uni-section>
		<uni-section title="开启阴影" subTitle="使用 shadow 属性启用阴影" type="line" style="margin-bottom: 3px;">
			<view class="box-bg">
				<uni-nav-bar shadow left-icon="left" title="开启阴影" @clickLeft="back" />
			</view>
		</uni-section>
		<uni-section title="开启暗黑模式" subTitle="使用 dark 属性设置暗黑模式" type="line" style="margin-bottom: 3px;">
			<view class="box-bg">
				<uni-nav-bar shadow left-icon="left" dark title="暗黑模式" @clickLeft="back" />
			</view>
		</uni-section>
		<uni-section title="带返回箭头+右侧图标" subTitle="使用 left-icon/right-icon 设置左右图标" type="line"
			style="margin-bottom: 3px;">
			<view class="box-bg">
				<uni-nav-bar shadow left-icon="left" right-icon="cart" title="标题" />
			</view>
		</uni-section>
		<uni-section title="左侧文字+右侧文字" subTitle="使用 left-text/right-text 设置左右文字" type="line"
			style="margin-bottom: 3px;">
			<view class="box-bg">
				<uni-nav-bar shadow left-icon="left" leftText="返回" rightText="设置" title="标题" />
			</view>
		</uni-section>
		<uni-section title="自定义颜色" subTitle="使用 color/background-color 属性设置前景背景色" type="line"
			style="margin-bottom: 3px;">
			<view class="box-bg">
				<view class="box-bg">
					<uni-nav-bar dark color="#999" backgroundColor="#f5f5f5" shadow left-icon="left" leftText="返回"
						rightText="设置" title="自定义颜色" />
				</view>
			</view>
		</uni-section>
		<uni-section title="自定义高度" subTitle="使用 height 修改组件高度" type="line" style="margin-bottom: 3px;">
			<view class="box-bg">
				<view class="box-bg">
					<uni-nav-bar height="65px" dark shadow left-icon="left" leftText="返回" rightText="设置"
						title="自定义高度" />
				</view>
			</view>
		</uni-section>
		<uni-section title="自定义内容" subTitle="使用 left/right/default 插槽自定义内容" type="line" style="margin-bottom: 3px;">
			<view class="box-bg">
				<uni-nav-bar>
					<block slot="left">
						<view class="city">
							<view>
								<text class="uni-nav-bar-text">{{ city }}</text>
							</view>
							<uni-icons type="arrowdown" color="#666" size="18" />
						</view>
					</block>
					<view class="input-view">
						<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
						<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
							@confirm="confirm" />
					</view>
					<block slot="right">
						<view class="city">
							搜索
						</view>
					</block>
				</uni-nav-bar>
			</view>
		</uni-section>


	</view>
</template>

完整示例演示