uView

此组件一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uni-app带的导航栏。

提示

右侧的演示中，导航栏上方有圆角，也有顶部的手机模型状态栏内容，以及返回图标和文字不对齐的情况。这是因为网页演示导致，实际中无此情况，请通过右上角的“演示”扫码查看实际效果。

警告

FPI

由于改写了背景色的逻辑，外部插入的组件，需要自己设置颜色。

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
√ √ √ √ √ √ √

# 基本使用

默认情况下，该组件只有向左的箭头，点击可以返回上一页，如果您想将自定义导航栏用在tabbar(不存在要返回的逻辑)页面，应该将is-back设置为false， 这样会隐藏左边的返回图标区域。

  • 如果想在返回箭头的右边自定义类似"返回"字样，可以将back-text设置为"返回"，前提是is-back要为true(默认)
  • 通过title参数传入需要显示的标题，通过title-width(rpx)设置标题区域的宽度，文字超出会通过省略号隐藏
  • 通过is-fixed配置是否将导航栏固定在顶部

说明

  • 在小程序中，导航栏会自动适配导航栏右侧的胶囊位置，避开该区域
  • 组件底部默认有一条下边框，如您不需要，可以设置border-bottom为false即可
<template>
	<view>
		<u-navbar
			:is-fixed="isFixed" :is-back="isBack" :type="type" :title="title" 
			:back-icon-name="backIconName" :back-text="backText" :theme="theme"
		>
			<view class="slot-wrap" v-if="useSlot">
				<view class="search-wrap" v-if="search">
					<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 -->
					<u-search v-model="keyword" :show-action="showAction" height="56" :action-style="{color: '#fff'}"></u-search>
				</view>
				<view class="navbar-right" v-if="rightSlot">
					<view class="message-box right-item">
						<u-icon name="chat" size="38"></u-icon>
						<u-badge count="18" size="mini" :offset="[-15, -15]"></u-badge>
					</view>
					<view class="dot-box right-item">
						<u-icon name="calendar-fill" size="38"></u-icon>
						<u-badge size="mini" :is-dot="true" :offset="[-6, -6]"></u-badge>
					</view>
				</view>
				<view class="map-wrap" v-if="custom">
					<u-icon name="map" color="#ffffff" size="24"></u-icon>
					<text class="map-wrap-text">轻舟已过万重山</text>
					<u-icon name="arrow-down-fill" color="#ffffff" size="22"></u-icon>
				</view>
			</view>
			<view class="navbar-right" slot="right" v-if="slotRight">
				<view class="message-box right-item">
					<u-icon name="chat" size="38"></u-icon>
					<!-- <u-badge count="18" size="mini" :offset="[-15, -15]"></u-badge> -->
				</view>
				<view class="dot-box right-item">
					<u-icon name="calendar-fill" size="38"></u-icon>
					<!-- <u-badge size="mini" :is-dot="true" :offset="[-6, -6]"></u-badge> -->
				</view>
			</view>
		</u-navbar>
		<view class="content">
			<!-- 正文内容 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				theme: 'normal',
				title: '新闻',
				backText: '',
				backIconName: 'nav-back',
				right: false,
				showAction: false,
				rightSlot: false,
				useSlot: false,
				background: {
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				isBack: true,
				search: false,
				custom: false,
				isFixed: true,
				keyword: '',
				// #ifdef MP
				slotRight: false,
				// #endif
				// #ifndef MP
				slotRight: true,
				// #endif
				type: 'primary'
			}
		},
	}
</script>

<style lang="scss" scoped>
	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}
	
	.search-wrap {
		margin: 0 20rpx;
		flex: 1;
	}
	
	.right-item {
		margin: 0 12rpx;
		position: relative;
		color: #ffffff;
		display: flex;
	}
	
	.message-box {
		
	}
	
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	.map-wrap {
		display: flex;
		align-items: center;
		padding: 4px 6px;
		background-color: rgba(240,240, 240, 0.35);
		color: #fff;
		font-size: 22rpx;
		border-radius: 100rpx;
		margin-left: 30rpx;
	}
	
	.map-wrap-text {
		padding: 0 6rpx;
	}
</style>

# 注意事项

既然是要自定义导航栏，那么首先就要取消系统自带的导航栏，需要在uni-app目的根目录的"pages.json"中设置，同时在此设置状态栏字体的颜色(H5无效)， 自定义导航栏后，如果想通过"uni.setNavigationBarColor"动态设置导航栏颜色相关参数，是可能会出问题的，请勿使用此方式。

// pages.json

"pages": [
	// navbar-自定义导航栏
	{
		"path": "/pages/navbar/index",
		"style": {
			"navigationStyle": "custom" ,// 隐藏系统导航栏
			"navigationBarTextStyle": "white" // 状态栏字体为白色，只能为 white-白色，black-黑色 二选一
		}
	}
]

# 导航栏高度

可以通过height(单位px，默认44，和uni-app统导航栏高度一致)配置导航栏的高度，此高度为导航栏内容的高度，不含状态栏的高度，组件内部会自动 加上状态栏的高度，并填充状态栏的占位区域。

注意上方说的uni-app方的高度，这里指的是H5，和APP。至于各家小程序，由于受导航栏右侧胶囊的影响，目前组件内部给安卓设定的导航栏高度为48px，iOS设定的导航栏高度为44，这是结合了大量的 实践的出来的结果，具备完好的兼容性。

# 自定义导航栏内容

一般需要自定义导航栏内部的内容的时候，分几种情况：

  • is-back为false可以去除导航栏左侧默认的返回图标和文字。
  • 如有必要，将title设置空字符串，同时将会去除导航栏中间显示标题的占位区域。

当将is-back设置为false，title设置为空字符串之后，导航栏将不会有任何默认的内容，您可以通过slot传入任意自定义内容，在APP和小程序上，导航栏 会自动添加状态栏的占位区域。

注意： 通过自定义slot传入的内容，为了能在导航栏中垂直居中，您可能需要注意下方示例的css的slot-wrap类的内容：

<template>
	<view>
		<u-navbar :is-back="false" title="">
			<view class="slot-wrap">
				......
			</view>
		</u-navbar>
		<view class="content">
			<!-- 正文内容 -->
		</view>
	</view>
</template>

<style scoped lang="scss">
	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
	}
</style>

温馨提示

uView有写一个完善的导航栏自定义内容案例，如右侧演示区域所示，如果想要看到具体的案例代码，请下载uView演示项目 (opens new window)查看。

# 自定义导航栏背景颜色

uView提供了一个background参数(需对象形式)，可以自定义导航栏的背景颜色：

  • 这个颜色，在APP和小程序上，包括状态的颜色在内
  • 如果是定义纯色的背景，可以设置backgroundColor属性
  • 如果是定义渐变的背景，可以设置backgroundImage属性
  • 如果是定义背景图，可以设置background属性，还可以加上其他属性，比如no-repeat，center等
<template>
	<view>
		<u-navbar :is-back="false" title="" :background="background">
			
		</u-navbar>
		<view class="content">
			<!-- 正文内容 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#001f3f',
					
					// 导航栏背景图
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',
					
					// 渐变色
					// backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				}
			}
		}
	}
</script>

# 自定义导航栏背景颜色
FPI

FPI 提供了一个type参数，可以自定义导航栏的背景颜色： 分别是 primary(主题)/error(红)/warning(黄)/success(绿)/ ""(白 -传空字符串)

<template>
	<view>
		<u-navbar :type="type" title="FPI"></u-navbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: "primary"
			}
		}
	}
</script>

# API

# Props

参数 说明 类型 默认值 可选值
theme
FPI
 主题模式，普通模式normal，关怀模式care String normal care
type
FPI
 颜色类型 String primary primary / success / warning / "" (传空)
height 导航栏高度(不包括状态栏高度在内，内部自动加上)，注意这里的单位是px String | Number 44 -
back-icon-color 左边返回图标的颜色 String - -
back-icon-name 左边返回图标的名称，只能为uView自带的图标，1.5.5起由arrow-left调整为nav-back String nav-back -
back-icon-size 左边返回图标的大小，单位rpx String | Number 30 -
back-text 返回图标右边的辅助提示文字 String - -
back-text-style 返回图标右边的辅助提示文字的样式，对象形式 Object { color: '#606266' } -
title 导航栏标题，如设置为空字符，将会隐藏标题占位区域 String - -
title-width 导航栏标题的最大宽度，内容超出会以省略号隐藏，单位rpx String | Number 250 -
title-color 标题的颜色 String - -
title-size 导航栏标题字体大小，单位rpx，1.5.5起由32调整为44 String | Number 44 -
z-index 固定在顶部时的z-index值 String | Number 980 -
is-back 是否显示导航栏左边返回图标和辅助文字 Boolean true false
background 导航栏背景设置(APP和小程序上包括状态栏的颜色)，见上方说明 Object { background: '' } -
is-fixed 导航栏是否固定在顶部 Boolean true false
border-bottom 导航栏底部是否显示下边框，如定义了较深的背景颜色，可取消此值 Boolean true false
custom-back
1.3.4
 自定义返回逻辑方法，如传入，点击返回按钮执行函数，否则正常返回上一页，注意模板中不需要写方法参数的括号 Function - -
immersive
1.5.6
 沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效 Boolean false true
title-bold 导航栏标题字体是否加粗
1.7.8
 Boolean false true
safeStatusBarHeight 顶部安全区域的高度 Number systemInfo.statusBarHeight -

# Slot

名称 说明
- 自定义中间部分的内容
right 自定义右侧部分内容

← tabs 标签 →