NavBar 导航栏

显示页面标题及左右操作，可固定在顶部并适配状态栏。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

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

基础用法

<!-- 页面导航栏 -->
<fui-nav-bar title="页面标题" @leftClick="handleBack" />

属性

属性	类型	说明	官网默认值
padding	Number / String	左右内边距，单位 px	8
title	String	标题	-
size	Number / String	标题字号，单位 px	17
color	String	标题颜色	#181818
fontWeight	Number / String	标题字重	500
background	String	背景色	#fff
splitLine	Boolean	是否显示底部分隔线	false
lineColor	String	分隔线颜色	#eee
statusBar	Boolean	高度是否包含状态栏	true
isFixed	Boolean	是否固定顶部	false
zIndex	Number / String	层级，nvue 不支持	996
custom	Boolean	是否自定义导航栏内容	false
isOccupy	Boolean	固定时是否占据导航栏高度	false

事件

事件	说明	回调参数
init	导航栏初始化	{ windowWidth, height, statusBarHeight, left, btnWidth, btnHeight }
leftClick	点击左侧区域	无
rightClick	点击右侧区域	无
titleClick	点击标题	无

H5 默认字号为 16px；nvue 不建议使用 isOccupy，可根据 init 的高度自行占位。

插槽

插槽	说明
default	左侧内容；custom 为 true 时为整个导航栏内容
right	右侧自定义内容