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

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

代码演示

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

基础使用

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

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

样式调整

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

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

左右显示内容

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

<wui-nav-bar title="标题内容" @leftClick="leftClick" @rightClick="rightClick">
<wui-icon name="w-arrowleft"></wui-icon>
<template v-slot:right>
  <wui-icon name="w-plus"></wui-icon>
</template>
</wui-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变量（--wui-color-title）改变字体颜色
fontWeight	Number, String	标题字重	500	-
background	String	导航栏背景色	#fff	非Nvue端默认值为空，可通过css变量（--wui-bg-color）改变背景颜色
splitLine	Boolean	是否需要底部分割线	false	-
lineColor	String	分割线颜色	#eee	仅Nvue端生效，其他端通过css变量（--wui-color-border）改变颜色
statusBar	Boolean	高度是否包含状态栏	true	-
isFixed	Boolean	是否固定在顶部	false	-
zIndex	Number, String	导航栏z-index值	996	Nvue端不支持，默认越靠后的元素层级越高，即将组件放置最底部
custom	Boolean	自定义navbar内容，为true时，title、右插槽失效	false	-

Events

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

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