Navbar 导航栏 | PIUI 高质量开源组件库

提示

导航栏默认包含状态栏占位
返回按钮根据当前页面堆栈自动判断, 若无上一级页面, 则不显示返回按钮，如果需要固定显示返回图标, 请设置show-back为true

# 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

# 示例

# 取消固定顶部

可通过fixed设置是否fixed在顶部

<pi-navbar title="取消fixed" :fixed="false" />

# 超长导航栏，自动剪裁添加省略号

可通过through-title-width限制导航栏文字宽度

<pi-navbar
  show-back
  through-title-width="400"
  title="超长导航栏，自动剪裁添加省略号"
  :fixed="false"
/>

1
2
3
4
5
6

# 自定义返回图标

可通过back-icon-name设置返回图标名

<pi-navbar back-icon-name="scan" :fixed="false" :show-back="true">
  自定义返回图标
</pi-navbar>

1
2
3

# 自定义返回名称

可通过back-text设置返回的文字提示

<pi-navbar back-icon-name="scan" back-text="后退" :fixed="false" :show-back="true">
  自定义返回名称
</pi-navbar>

1
2
3

# 隐藏返回按钮

可通过show-back设置返回按钮是否显示

<pi-navbar :show-back="false" :fixed="false">隐藏返回按钮</pi-navbar>

# 自定义导航栏样式

可通过sbackground设置导航栏背景颜色

<pi-navbar
  back-icon-name="scan"
  back-text="后退"
  background="linear-gradient(to right, #e0eafc, #cfdef3)"
  :fixed="false"
  :show-back="true"
>
  自定义背景颜色
</pi-navbar>

1
2
3
4
5
6
7
8
9

<pi-navbar
  back-icon-name="scan"
  back-text="回退"
  background="#76b852"
  back-icon-color="#ffffff"
  :back-text-style="{ color: '#ffffff' }"
  title="自定义导航文字"
  :title-style="{ color: '#ffffff' }"
  :fixed="false"
  :show-back="true"
/>

1
2
3
4
5
6
7
8
9
10
11

# 插槽示例

back-text-style设置返回文字样式, title-style设置标题文字样式

<pi-navbar :fixed="false" :show-back="true">
  <view>默认插槽</view>
</pi-navbar>

1
2
3

<pi-navbar :fixed="false" title="左边插槽">
  <view slot="left" class="pi-pd-left-24 pi-icon-add pi-fz-46 pi-primary" />
</pi-navbar>

1
2
3

<pi-navbar :fixed="false" title="右边插槽" :show-back="true">
  <view slot="right" class="pi-pd-right-24 pi-icon-add pi-fz-46 pi-primary" />
</pi-navbar>

1
2
3

# 示例

配合pi-search使用

<pi-navbar :fixed="false">
  <pi-search slot="title" show-action :action-style="{ paddingRight: '18rpx' }" />
</pi-navbar>

1
2
3

配合pi-tabs使用

<pi-navbar :fixed="false">
  <pi-tabs v-model="demo2.currentItem" :items="demo2.tabItems" slider-bar-width="60" />
</pi-navbar>

1
2
3

# Props

名称	描述	类型	必选	默认值
customStyle	自定义样式添加到组件的根节点上	`Object`	`false`	{}
customClass	自定义样式类添加到组件的根节点上	`String`	`false`	''
title	标题	`String`	`false`	''
titleStyle	标题样式	`Object`	`false`	{ fontSize: '36rpx', fontWeight: 500, color: '#333333' }
height	导航栏高度	`String`	`false`	'44px'
throughTitleWidth	贯穿布局下title宽度设置	`String`	`false`	'auto'
fixed	导航栏是否固定在顶部	`Boolean`	`false`	true
placeholder	固定在顶部时，是否生成一个与导航栏高度登高的占位容器	`Boolean`	`false`	true
borderBottom	是否显示导航栏的下边框	`Boolean`	`false`	true
statusBarBackground	状态栏的背景色	`String`	`false`	'transparent'
background	背景颜色	`String`	`false`	'#ffffff'
showBack	是否显示后退按钮，默认不设置，根据当前页面堆栈自动判断	`String`/`Boolean`	`false`	''
showHome	是否显示主页按钮	`Boolean`	`false`	false
capsuleButton	在微信小程序中，当showBack和showHome同时显示的时候，以胶囊按钮样式显示	`Boolean`	`false`	true
capsuleTheme	胶囊按钮主题, 可选 'light'/'dark'	`String`	`false`	'light'
backIconColor	返回箭头的颜色	`String`	`false`	'#333333'
backIconName	左边返回的图标，自动拼接前缀pi-icon-	`String`	`false`	'back'
backIconSize	左边返回图标的大小	`String`	`false`	'36rpx'
backIconPadding	左边返回图标的padding	`String`	`false`	'10rpx 24rpx'
backText	返回的文字提示	`String`	`false`	''
backTextStyle	返回的文字的样式	`Object`	`false`	{ color: '#333333' }
customBackFunc	是否自定义返回函数	`Boolean`	`false`	-
homeIconColor	主页icon的颜色	`String`	`false`	'#333333'
homeIconName	主页icon的图标自动拼接前缀pi-icon-	`String`	`false`	'homefill'
homeIconSize	主页icon图标的大小	`String`	`false`	'36rpx'
homeIconPadding	主页icon图标的padding	`String`	`false`	'10rpx 24rpx'
homePage	主页路径	`String`	`false`	''
homePageMethod	跳转主页方法，可选值为：`navigateTo` `redirectTo` `switchTab` `reLaunch` `switchTab`	`String`	`false`	-
customHomeFunc	是否自定义主页跳转函数	`Boolean`	`false`	-
zIndex	元素 z-index	`String`/`Number`	`false`	99

# Slots

名称	描述	插槽内容
left	定制导航栏左侧内容	-
title	定制导航栏标题	-
default	slot default	-
right	定制导航栏右侧区域	-

事件名	描述	参数
navigateToBack	当customBackFunc设置false，点击返回触发事件	-
navigateToHome	当customHomeFunc设置false，点击主页触发事件	-

← BottomBar 底部按钮栏 Tabs 标签栏 →

# Navbar 导航栏

# 平台差异说明

# 示例

# 取消固定顶部

# 超长导航栏，自动剪裁添加省略号

# 自定义返回图标

# 自定义返回名称

# 隐藏返回按钮

# 自定义导航栏样式

# 插槽示例

# 示例

# Props

# Slots

# Navbar Events