导航栏 NavBar

导航栏组件。

兼容性

• 兼容：✅
• 不兼容：❌
• 未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

DCloud 插件市场地址

基础使用

• 通过 title 属性设置导航标题。

<template>
    <pure-nav-bar title="导航栏"></pure-nav-bar>
</template>

返回按钮

• 通过 back 属性设置是否显示返回按钮。
• 通过 backIcon 属性设置返回按钮图标名称。
• 通过 backText 属性设置返回按钮文本。
• 通过 autoBack 属性设置是否点击自动返回上一页。
• 通过 backDelta 属性设置返回页面数。

提示

辅助类使用规则

<template>
    <pure-nav-bar title="不自动返回" back backText="返回"></pure-nav-bar>
</template>

左/右菜单按钮

• 通过 leftBtns 属性设置左侧功能菜单按钮。
• 通过 rightBtns 属性设置右侧功能菜单按钮。
• 菜单按钮的数据结构见下方说明。

<template>
    <pure-nav-bar title="导航栏" back :leftBtns="leftBtns" :rightBtns="rightBtns"></pure-nav-bar>
</template>

菜单按钮数据结构

属性名	说明	类型	默认值	可选值	版本
icon	菜单按钮的图标名称，同图标组件（Icon）的 name 属性，参考	String	-	-	+1.0.0
text	菜单按钮的文字	String	-	-	+1.0.0
hoverClass	菜单按钮的 hover-class	String	-	-	+1.0.0
disabled	菜单按钮禁用状态	Boolean	-	-	+1.0.0
disabledClass	菜单按钮的禁用 class	String	-	-	+1.0.0
style	菜单按钮的自定义样式	String	-	-	+1.0.0
class	菜单按钮的自定义 class	String	-	-	+1.0.0
hide	是否隐藏该菜单按钮	Boolean	-	-	+1.0.0
iconStyle	菜单按钮图标的自定义样式	String	-	-	+1.0.0
iconClass	菜单按钮图标的自定义 class	String	-	-	+1.0.0
iconProps	菜单按钮图标的配置，同 Icon 组件的 Props，参考	Object	-	-	+1.0.0
textStyle	菜单按钮文本的自定义样式	String	-	-	+1.0.0
textClass	菜单按钮文本的自定义 class	String	-	-	+1.0.0
props	菜单按钮的配置，同 Button 组件的 Props，参考	Object	""	-	+1.0.0

安全胶囊

• 通过 safeMenuButton 属性设置是否在右侧留出胶囊按钮安全宽度。

<template>
    <pure-nav-bar title="导航栏" back safeMenuButton></pure-nav-bar>
</template>

标题对齐方式

• 默认标题居中对齐，设置 left 属性可以让标题居左对齐。

<template>
    <pure-nav-bar title="导航栏" back left></pure-nav-bar>
</template>

Props

属性名	说明	类型	默认值	可选值	版本
hoverClass	导航栏中按钮的 hover-class	String	"pure-hover"	-	+1.0.0
statusBar	是否显示状态栏	Boolean	true	false	+1.0.0
disabledClass	导航栏中按钮禁用状态的 class	String	pure-disabled	-	+1.0.0
back	是否显示返回按钮	Boolean	false	-	+1.0.0
backIcon	返回按钮图标名称，同图标组件（Icon）的 name 属性，参考	String	__zuo2	-	+1.0.0
backText	返回按钮文本	String	-	-	+1.0.0
autoBack	点击返回按钮是否自动返回	Boolean	true	false	+1.0.0
backDelta	返回页数	[Number, String]	1	-	+1.0.0
title	标题	String	-	-	+1.0.0
left	标题是否居左对齐	Boolean	false	-	+1.0.0
safeMenuButton	右侧是否留出胶囊按钮安全宽度	Boolean	false	-	+1.0.0
leftBtns	左侧功能按钮数据	Array	[]	-	+1.0.0
rightBtns	右侧功能按钮数据	Array	[]	-	+1.0.0

Event

事件名	说明	回调参数	版本
back	返回事件	-	+1.0.0
btnClick	功能菜单按钮点击事件	btn: 按钮数据	+1.0.0
<button> 组件的原生事件	参考	-	+1.0.0

提示

button 组件的原生事件的回调参数：第一个为原生事件对象 $event，第二个参数为按钮数据 btn。

Slots

名称	说明	参数	版本
left	左侧区域	-	+1.0.0
back	返回按钮	-	+1.0.0
leftBtns	左侧功能菜单按钮区域	-	+1.0.0
title	标题	-	+1.0.0
rightBtns	右侧功能菜单按钮区域	-	+1.0.0