uv-ui

✈

组件名：uv-navbar

点击下载&安装 (opens new window)

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

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √ √ √

# 基本使用

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

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

说明

  • 在小程序中，导航栏会自动适配导航栏右侧的胶囊位置，避开该区域
  • 组件底部默认有一条下边框，如您不需要，可以设置border为false即可
<template>
	<view>
		<uv-navbar title="个人中心" @leftClick="leftClick"></uv-navbar>
	</view>
</template>
<script>
	export default {
		methods: {
			leftClick() {
				console.log('leftClick');
			}
		}
	}
</script>

# 注意事项

  • 既然是要自定义导航栏，那么首先就要取消系统自带的导航栏，需要在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统导航栏高度一致)配置导航栏的高度，此高度为导航栏内容的高度，不含状态栏的高度，组件内部会自动加上状态栏的高度，并填充状态栏的占位区域。

# 自定义导航栏内容

通过自定义slot传入的内容

<template>
	<view>
		<uv-navbar leftText="返回" :fixed="false" title="个人中心" :safeAreaInsetTop="false">
			<template v-slot:left>
				<view class="uv-nav-slot">
					<uv-icon name="arrow-left" size="19"></uv-icon>
					<uv-line direction="column" :hairline="false" length="16" margin="0 8px"></uv-line>
					<uv-icon name="home" size="20"></uv-icon>
				</view>
			</template>
		</uv-navbar>
	</view>
</template>
<style scoped lang="scss">
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
</style>

# 导航栏背景颜色

uv-ui提供了一个bgColor参数，可以自定义导航栏的背景颜色，支持如下：

  • 普通颜色值
  • 透明度
  • 渐变色
<template>
	<view>
		<!-- 普通颜色 -->
		<uv-navbar title="个人中心" bgColor="#c0c4cc"></uv-navbar>
		<!-- 透明色 -->
		<uv-navbar title="个人中心" bg-color="rgba(0,0,0,.5)"></uv-navbar>
		<!-- 渐变色 -->
		<uv-navbar 
			title="个人中心" 
			bg-color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))">
		</uv-navbar>
		<!-- 背景图片 -->
		<uv-navbar 
			title="个人中心" 
			bg-color="https://via.placeholder.com/400x200.png/3c9cff/fff" 
			imgMode="aspectFit">
		</uv-navbar>
	</view>
</template>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

参数 说明 类型 默认值 可选值
title 导航栏标题，如设置为空字符，将会隐藏标题占位区域 String - -
safeAreaInsetTop 是否开启顶部安全区适配 Boolean true true | false
placeholder 固定在顶部时，是否生成一个等高元素，以防止塌陷 Boolean false true | false
fixed 导航栏是否固定在顶部 Boolean true true | false
border 导航栏底部是否显示下边框 Boolean false true | false
leftIcon 左边返回图标的名称，只能为uv-ui自带的图标 String arrow-left -
leftText 左边的提示文字 String - -
rightText 右边的提示文字 String - -
rightIcon 右边返回图标的名称，只能为uv-ui自带的图标 String - -
bgColor 导航栏背景设置，支持渐变色，支持图片背景 String #ffffff -
imgMode bgColor为图片时，可以通过此属性设置裁剪模式 String aspectFill 更多模式参考image (opens new window)
titleWidth 导航栏标题的最大宽度，内容超出会以省略号隐藏，单位px(rpx) String | Number 400rpx -
height 导航栏高度(不包括状态栏高度在内，内部自动加上)，单位px(rpx) String | Number 44px -
leftIconSize 左侧返回图标的大小 String | Number 20px -
leftIconColor 左侧返回图标的颜色 String #303133 -
autoBack 点击左侧区域(返回图标)，是否自动返回上一页 Boolean false true | false
titleStyle 标题的样式，对象或字符串形式 String | Object - -
名称 参数 说明
@leftClick - 点击左侧区域
@rightClick - 点击右侧区域
名称 说明
left 自定义左侧部分内容
right 自定义右侧部分内容
center 自定义中部内容

← ActionSheet 操作菜单 →