NavBar 导航栏

为页面提供导航功能，常用于页面顶部。支持自定义标题、左右按钮、背景颜色等多种配置。

导入

import NavBar from '@/components/nav/NavBar.vue';

使用方法

基础用法

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

<template>
  <NavBar 
    title="标题" 
    backgroundColor="white" 
    @leftButtonPressed="onClick" 
  />
</template>

<script setup>
function onClick() {
  uni.showToast({
    title: '点击了',
    icon: 'none',
  });
}
</script>

返回上级

设置 leftButton="back" 可以实现返回上级页面的功能。

<template>
  <NavBar 
    title="标题" 
    backgroundColor="white" 
    leftButton="back"
  />
</template>

右侧按钮

可以在导航栏右侧添加不同类型的按钮，还可以设置右侧胶囊按钮空间。

<template>
  <NavBar 
    title="标题" 
    backgroundColor="white" 
    leftButton="back"
    rightButton="search"
  />
  
  <!-- 右侧胶囊按钮空间 -->
  <NavBar 
    title="右侧胶囊按钮空间" 
    backgroundColor="white" 
    leftButton="back"
    rightButton="search"
    rightPillSpace
  />
</template>

超长文字自动滚动

当标题文字过长时，可以启用自动滚动功能。

<template>
  <NavBar 
    title="网页：今日要闻，某某大事件某某大事件某某大事件" 
    titleScroll
    backgroundColor="white" 
    leftButton="back"
  />
</template>

自定义渲染

可以通过插槽自定义导航栏两侧的内容。

<template>
  <NavBar 
    title="标题" 
    backgroundColor="white" 
    leftButton="back"
    rightButton="search"
  >
    <template #left>
      <!-- 自定义左侧内容 -->
    </template>
    <template #right>
      <Image src="https://imengyu.top/assets/images/test/1.jpg" :width="60" :height="60" />
    </template>
  </NavBar>
</template>

<script setup>
import Image from '@/components/basic/Image.vue';
</script>

API 参考

Props

名称	说明	类型	必填	默认值
height	标题栏高度	number | string	否	80
leftButton	左侧按钮类型	'back' | 'menu' | 'search' | 'setting' | 'custom'	否	-
title	标题文字	string	否	-
align	标题对齐方式	'center' | 'left'	否	'center'
rightButton	右侧按钮类型	'back' | 'menu' | 'search' | 'setting' | 'custom'	否	-
showRightButton	是否显示右侧按钮	boolean	否	true
rightPillSpace	是否显示右侧按钮的胶囊间距	boolean	否	-
rightPillSpaceForce	手动指定右侧按钮的胶囊间距（像素）	number	否	50
showLeftButton	是否显示左侧按钮	boolean	否	true
backgroundColor	自定义背景颜色	string	否	-
textColor	自定义文字颜色	string	否	'black'
innerStyle	自定义样式	object	否	-
titleStyle	自定义标题文字样式	object	否	-
titleScroll	标题文字超出时，是否自动滚动	boolean	否	true
iconProps	图标透传样式	object	否	-

Slots

名称	说明
left	左侧按钮自定义内容
center	中间标题自定义内容
right	右侧按钮自定义内容

Events

名称	说明	参数
leftButtonPressed	左侧按钮点击事件	无
rightButtonPressed	右侧按钮点击事件	无

主题变量

变量名	默认值	说明
NavBarHeight	80	导航栏高度
NavBarAlign	'center'	标题对齐方式
NavBarTitleColor	'black'	标题文字颜色
NavBarTitleFontSize	30	标题文字大小
NavBarTitlePaddingHorizontal	15	标题文字水平内边距