NavBar 导航栏

概述

NavBar 导航栏，用于提供页面的导航能力。当原生导航栏无法满足需求时使用。

支持平台

App-vue	App-Nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

温馨提示

一般来说我们会通过 z-index + position 来进行层级的设置，但是 weex （Nvue）不支持 z-index 设置层级关系，默认越靠后的元素层级越高。

引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiNavBar from "@/components/firstui/fui-nav-bar/fui-nav-bar.vue"
export default {
	components:{
		fuiNavBar
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 title 属性设置标题，splitLine 属性设置是否显示底部分割线。

<fui-nav-bar title="标题" splitLine></fui-nav-bar>

样式调整

通过 title 属性设置标题，background 属性设置背景颜色，color 属性设置标题字体颜色。

<fui-nav-bar title="标题" background="linear-gradient(300deg, #6831FF, #465CFF)" color="#fff"></fui-nav-bar>

左右显示内容

通过 title 属性设置标题，leftClick 为左侧按钮点击事件，rightClick 为右侧按钮点击事件。

<fui-nav-bar title="标题内容" @leftClick="leftClick" @rightClick="rightClick">
	<fui-icon name="arrowleft"></fui-icon>
	<template v-slot:right>
		<fui-icon name="plus"></fui-icon>
	</template>
</fui-nav-bar>

Slots

插槽名称	说明
default	左侧按钮自定义显示内容。当custom属性为true时，为组件内自定义内容
right	右侧按钮自定义显示内容。当custom属性为true时失效

Props

属性名	类型	说明	默认值	平台差异说明
padding	Number, String	navbar左右padding值，单位px	8	-
title	String	标题	-	-
size	Number, String	标题字体大小，单位px	17	H5端默认为16
color	String	标题颜色	#181818	非Nvue端默认值为空，可通过css变量（--fui-color-title）改变字体颜色
fontWeight	Number, String	标题字重	500	-
background	String	导航栏背景色	#fff	非Nvue端默认值为空，可通过css变量（--fui-bg-color）改变背景颜色
splitLine	Boolean	是否需要底部分割线	false	-
lineColor	String	分割线颜色	#eee	仅Nvue端生效，其他端通过css变量（--fui-color-border）改变颜色
statusBar	Boolean	高度是否包含状态栏	true	-
isFixed	Boolean	是否固定在顶部	false	-
zIndex	Number, String	导航栏z-index值	996	Nvue端不支持，默认越靠后的元素层级越高，即将组件放置最底部
custom	Boolean	自定义navbar内容，为true时，title、右插槽失效	false	-
isOccupy V1.9.9+	Boolean	当isFixed为true时，是否占据导航栏高度，避免高度塌陷。 注意：使用此属性请将组件放置页面最顶部	false	Nvue端不推荐使用，避免层级低于其他元素，请根据init事件返回高度值自行设置。

Events

初始化事件中悬浮按钮相关参数仅支持微信/百度/字节/QQ小程序，其他端忽略。坐标、宽度等单位均为px。

事件名	说明	回调参数
@init	导航栏初始化时触发	{   windowWidth:可使用窗口宽度   height:导航栏高度，不包含状态栏   statusBarHeight:状态栏高度   left:小程序右上角悬浮按钮左边界坐标   btnWidth:小程序右上角悬浮按钮宽度   btnHeight:小程序右上角悬浮按钮高度 }
@leftClick	点击左侧按钮时触发	-
@rightClick	点击右侧按钮时触发	-
@titleClick	点击标题时触发	-

示例预览

示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用 。

开通会员 (opens new window)