导航栏

导航栏组件。

标题

• 通过 title 属性设置标题。
• 通过 titleAlign 属性设置标题文本对齐方式。
  • left：左对齐
  • center：居中对齐

<template>
	<pure-navbar title="首页"></pure-navbar>
</template>

返回按钮

• 通过 isBack 属性设置是否显示返回按钮。
• 通过 backText 属性设置返回按钮文本。
• 通过 autoBack 属性设置是否自动返回上一页。

<template>
	<pure-navbar
		title="首页"
		isBack
		autoBack
		backText="返回"
	></pure-navbar>
</template>

高度

有时需要获取标签栏的高度，以便进行布局，组件提供了以下两种方式获取导航组件的高度：

1. 通过 ref 引用获取标签栏组件实例，然后通过实例的 height 属性获取高度。
2. 通过 uni.$pureNavBarHeight 获取导航栏组件的高度。

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	按下去的样式类
withStatusBar	Boolean	true	是否包含状态栏
statusBarHeight	String	系统状态栏高度	状态栏高度
height	String	系统导航栏高度	高度（不包含状态栏）
backgroundColor	String	--pure-background-element	背景
title	String		标题
titleAlign	String	center	标题文本对齐方式
isBack	Boolean	false	是否显示返回按钮
backText	String		返回按钮文本
autoBack	Boolean	true	是否点击返回按钮后自动返回上一页
backOpts	Object	undefined	返回按钮配置项 参考
isFixed	Boolean	false	是否固定在顶部
safeMenuButton	Boolean	false	是否预留出右侧胶囊按钮安全区域

事件

名称	参数	说明
onBack		返回按钮点击事件 autoBack 为 true 时不会触发

对外属性

名称	参数	说明
height	number	组件高度

插槽

名称	参数	说明
#back		返回按钮
#left		左侧内容，不包含返回按钮
#default		默认，标题
#right		右侧内容

样式变量

名称	说明
--pure-nav-bar-status-bar-height	状态栏高度
--pure-nav-bar-background	背景
--pure-nav-bar-height	高度
--pure-nav-bar-padding	内边距
--pure-nav-bar-back-align-items	返回按钮内容对齐方式
--pure-nav-bar-back-justify-content	返回按钮内容对齐方式
--pure-nav-bar-back-margin	返回按钮外边距
--pure-nav-bar-back-padding	返回按钮内边距
--pure-nav-bar-back-gap	返回按钮内容间距
--pure-nav-bar-back-icon-font-size	返回按钮图标字体大小
--pure-nav-bar-back-icon-font-weight	返回按钮图标字体粗细
--pure-nav-bar-back-icon-color	返回按钮图标颜色
--pure-nav-bar-back-text-font-size	返回按钮文本字体大小
--pure-nav-bar-back-text-font-weight	返回按钮文本字体粗细
--pure-nav-bar-back-text-color	返回按钮文本颜色
--pure-nav-bar-title-font-size	标题字体大小
--pure-nav-bar-title-font-weight	标题字体粗细
--pure-nav-bar-title-color	标题颜色
--pure-nav-bar-title-width	标题宽度
--pure-nav-bar-title-margin	标题外边距
--pure-nav-bar-title-padding	标题内边距