uView Next

# Tabbar 底部导航栏

# 优点：

此组件提供了自定义 tabbar 的能力，具有如下特点：

  • 图标可以使用字体图标(内置图标和扩展图标)或者图片
  • 可以动态切换菜单的数量以及配置
  • 切换菜单之前，可以进行回调鉴权
  • 可以设置角标或数字化提示
  • 有效防止组件区域高度塌陷，无需给父元素额外的内边距或者外边距来避开导航的区域

# 平台差异说明

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

# 基本使用 3.6.14

使用url属性跳转的指定网页，可配合linkType属性改变跳转方式

<u-tabbar>
  <u-tabbar-item text="首页" icon="home" url="/pages/index/index"></u-tabbar-item>
  <u-tabbar-item text="放映厅" icon="photo" url="/pages/video/video"></u-tabbar-item>
  <u-tabbar-item text="直播" icon="play-right" url="/pages/live/live"></u-tabbar-item>
  <u-tabbar-item text="我的" icon="account" url="/pages/user/user"></u-tabbar-item>
</u-tabbar>

✅ Copy success!

# 使用click事件自定义处理

推荐您使用 list 数组遍历循环，案例使用基础方式构建，请根据click事件回调进行后续逻辑操作。

<u-tabbar>
  <u-tabbar-item text="首页" icon="home" @click="click1"></u-tabbar-item>
  <u-tabbar-item text="放映厅" icon="photo" @click="click1"></u-tabbar-item>
  <u-tabbar-item text="直播" icon="play-right" @click="click1"></u-tabbar-item>
  <u-tabbar-item text="我的" icon="account" @click="click1"></u-tabbar-item>
</u-tabbar>
<!-- js -->
value1: 0, click1(e) { console.log('click1', e); }

✅ Copy success!

# 显示徽标

使用dot属性添加--小点--类型徽标，使用badge属性添加--数字--类型徽标。您也可以使用:badge='badge'动态设置徽标数量， 这在消息盒子的展示中是比较好用的功能，

<u-tabbar
  :value="value2"
  :placeholder="false"
  @change="name => value2 = name"
  :fixed="false"
  :safeAreaInsetBottom="false"
>
  <u-tabbar-item text="首页" icon="home" dot></u-tabbar-item>
  <u-tabbar-item text="放映厅" icon="photo" badge="3"></u-tabbar-item>
  <u-tabbar-item text="直播" icon="play-right"></u-tabbar-item>
  <u-tabbar-item text="我的" icon="account"></u-tabbar-item>
</u-tabbar>
<!-- data -->
value2: 1,

✅ Copy success!

# 匹配标签的名称

<u-tabbar
  :placeholder="false"
  :value="value3"
  @change="name => value3 = name"
  :fixed="false"
  :safeAreaInsetBottom="false"
>
  <u-tabbar-item text="首页" icon="home" name="home"></u-tabbar-item>
  <u-tabbar-item text="放映厅" icon="photo" name="photo"></u-tabbar-item>
  <u-tabbar-item
    text="直播"
    icon="play-right"
    name="play-right"
  ></u-tabbar-item>
  <u-tabbar-item text="我的" name="account" icon="account"></u-tabbar-item>
</u-tabbar>
<!-- data -->
value3: 'play-right',

✅ Copy success!

# 自定义图标/颜色

如您需要自定义图标/颜色，在u-tabbar-item标签中使用插槽active-icon和inactive-icon来定义图标和颜色

<u-tabbar
  :value="value4"
  @change="name => value4 = name"
  :fixed="false"
  :placeholder="false"
  activeColor="#d81e06"
  :safeAreaInsetBottom="false"
>
  <u-tabbar-item text="首页">
    <image
      class="u-page__item__slot-icon"
      slot="active-icon"
      src="https://uviewui.com/common/bell-selected.png"
    ></image>
    <image
      class="u-page__item__slot-icon"
      slot="inactive-icon"
      src="https://uviewui.com/common/bell.png"
    ></image>
  </u-tabbar-item>
  <u-tabbar-item text="放映厅" icon="photo"></u-tabbar-item>
  <u-tabbar-item text="直播" icon="play-right"></u-tabbar-item>
  <u-tabbar-item text="我的" icon="account"></u-tabbar-item>
</u-tabbar>
<!-- data -->
value4: 0,

✅ Copy success!

# 拦截切换事件(点击第二个标签)

在切换事件中，处理拦截事件或者您其他 js 操作逻辑。

<u-tabbar
  :value="value5"
  :fixed="false"
  @change="change5"
  :safeAreaInsetBottom="false"
  :placeholder="false"
>
  <u-tabbar-item text="首页" icon="home"></u-tabbar-item>
  <u-tabbar-item text="放映厅" icon="photo"></u-tabbar-item>
  <u-tabbar-item text="直播" icon="play-right"></u-tabbar-item>
  <u-tabbar-item text="我的" icon="account"></u-tabbar-item>
</u-tabbar>
<!-- data -->
value5: 0,
<!-- js -->
change5(name) { if (name === 1) return uni.$u.toast('请您先登录') else
this.value5 = name },

✅ Copy success!

# 边框

组件默认带了顶部边框，如果不需要，配置border为false即可。

<u-tabbar
  :value="value7"
  :placeholder="false"
  :border="false"
  @change="name => value7 = name"
  :fixed="false"
  :safeAreaInsetBottom="false"
>
  <u-tabbar-item text="首页" icon="home"></u-tabbar-item>
  <u-tabbar-item text="放映厅" icon="photo"></u-tabbar-item>
  <u-tabbar-item text="直播" icon="play-right"></u-tabbar-item>
  <u-tabbar-item text="我的" icon="account"></u-tabbar-item>
</u-tabbar>
<!-- data -->
value7: 3

✅ Copy success!

# 固定在底部(固定在屏幕最下方)

与原生效果无异，但您可以按照 api 配置您需要的其他配置，如徽标，边框等

<u-tabbar
  :value="value6"
  @change="name => value6 = name"
  :fixed="true"
  :placeholder="true"
  :safeAreaInsetBottom="true"
>
  <u-tabbar-item text="首页" icon="home"></u-tabbar-item>
  <u-tabbar-item text="放映厅" icon="photo"></u-tabbar-item>
  <u-tabbar-item text="直播" icon="play-right"></u-tabbar-item>
  <u-tabbar-item text="我的" icon="account"></u-tabbar-item>
</u-tabbar>
<!-- data -->
value6: 0,

✅ Copy success!

# 标签模式

使用 mode="tag" 可以创建标签样式的导航栏，适合用于分类切换场景。

<u-tabbar 
  mode="tag" 
  :value="value7" 
  :placeholder="false" 
  @change="name => value7 = name"
  :fixed="false" 
  :safeAreaInsetBottom="false"
>
  <u-tabbar-item text="首页"></u-tabbar-item>
  <u-tabbar-item text="放映厅"></u-tabbar-item>
  <u-tabbar-item text="直播"></u-tabbar-item>
  <u-tabbar-item text="我的"></u-tabbar-item>
</u-tabbar>
<!-- data -->
value7: 3

✅ Copy success!

# 悬浮胶囊标签栏

使用 shape="circle" 可以创建圆形的胶囊样式标签栏，适合悬浮显示。

<!-- 迷你样式 -->
<u-tabbar 
  :value="value6" 
  :fixed="false" 
  shape="circle" 
  :fit="true" 
  @change="name => value6 = name" 
  height="34"
>
  <u-tabbar-item icon="home"></u-tabbar-item>
  <u-tabbar-item icon="photo"></u-tabbar-item>
  <u-tabbar-item icon="play-right"></u-tabbar-item>
</u-tabbar>

<!-- 标准样式 -->
<u-tabbar 
  :value="value6" 
  :fixed="false" 
  shape="circle" 
  @change="name => value6 = name"
>
  <u-tabbar-item text="首页" icon="home"></u-tabbar-item>
  <u-tabbar-item text="放映厅" icon="photo"></u-tabbar-item>
  <u-tabbar-item text="直播" icon="play-right"></u-tabbar-item>
  <u-tabbar-item text="我的" icon="account"></u-tabbar-item>
</u-tabbar>

✅ Copy success!

# 中间凸起按钮

使用 :middle="true" 可以让某个标签项凸起显示，常用于发布按钮等特殊功能。

<u-tabbar 
  :value="value6" 
  @change="name => value6 = name"
  :fixed="true" 
  :placeholder="true" 
  :safeAreaInsetBottom="true"
>
  <u-tabbar-item text="首页" icon="home"></u-tabbar-item>
  <u-tabbar-item text="放映厅" icon="photo"></u-tabbar-item>
  <u-tabbar-item text="发布" icon="plus" :middle="true"></u-tabbar-item>
  <u-tabbar-item text="直播" icon="play-right"></u-tabbar-item>
  <u-tabbar-item text="我的" icon="account"></u-tabbar-item>
</u-tabbar>

✅ Copy success!

# 此页面源代码地址

页面源码地址


 github  gitee

# API

# TabBar Props

参数 说明 类型 默认值 可选值
value 当前匹配项的 name String | Number null -
safeAreaInsetBottom 是否为 iPhoneX 留出底部安全距离，注意：胶囊模式不支持 Boolean true false
border 是否显示上方边框 Boolean true false
borderColor 边框颜色 String - -
bgColor 背景颜色 String #ffffff -
zIndex 元素层级 z-index String | Number 1 -
activeColor 选中标签的颜色 String #1989fa -
inactiveColor 未选中标签的颜色 String #7d7e80 -
fixed 是否固定在底部 Boolean true false
placeholder fixed 定位固定在底部时，是否生成一个等高元素防止塌陷 Boolean true false
shape 3.5.33 标签栏的形状 String normal normal, circle
height 3.5.33 标签栏的高度 String | Number 50 -
fit 3.5.33 是否自适应宽度 Boolean false true
bottom 3.5.33 胶囊标签栏底部边距 String | Number - -
mode 3.5.33 标签模式 String normal normal, tag

# TabBarItem Props

参数 说明 类型 默认值 可选值
name item 标签的名称，作为与 u-tabbar 的 value 参数匹配的标识符 String | Number null -
icon uView 内置图标或者绝对路径的图片 String - -
iconSize 3.5.33 图标大小 String | Number 20 -
iconBgColor 3.5.33 图标背景颜色，仅中间凸起按钮有效 String theme.primary -
iconColor 3.5.33 图标颜色 ，仅中间凸起按钮有效 String #fff -
badge 右上角的角标提示信息 String | Number null -
dot 是否显示圆点，将会覆盖 badge 参数 Boolean false true
text 描述文本 String - -
badgeStyle 控制徽标的位置，对象或者字符串形式，可以设置 top 和 right 属性 Object | String 'top: 6px;right:2px;' -
middle 3.5.33 是否为中间凸起按钮 Boolean false true
url 3.6.14 点击后跳转的URL地址 String - -
linkType 3.6.14 链接跳转的方式 String redirectTo navigateTo,switchTab,reLaunch

# TabBarItem Events

事件名 说明 回调参数
change 切换选项时触发 index：当前要切换项的 name
click 切换选项时触发 index：当前要切换项的 name

# Methods

方法名 说明
getRect 3.5.34 获取当前tabbar节点信息，包括height,width,bottom,top,left,right等
上次更新时间: 2025/9/11 13:27:54

← BackTop 返回顶部 →

🌟 真诚邀请 🌟
如果你觉得本项目对你有帮助
欢迎访问我们的Gitee/Github 仓库为我们点个 Star！
点我去 Gitee 点我去 Github
帮忙助力一下
关闭弹窗
×