TabBar 标签栏

底部标签栏组件，用于页面底部导航切换，配合 re-tab-bar-item 使用

底部标签栏组件，用于页面底部导航切换，配合 re-tab-bar-item 使用

演示

9:41

代码示例

<!-- 默认标签栏 -->
  <re-tab-bar class="demo-default" :value="0">
  <re-tab-bar-item class="demo-tb-item-1" label="首页" icon="home" :value="0" />
  <re-tab-bar-item class="demo-tb-item-2" label="应用" icon="app" :value="1" />
  <re-tab-bar-item class="demo-tb-item-3" label="我的" icon="user" :value="2" />

<!-- 圆角形状 -->
  <re-tab-bar class="demo-round" shape="round" :value="0">
  <re-tab-bar-item label="消息" icon="chat" :value="0" />
  <re-tab-bar-item label="我的" icon="user" :value="1" />

<!-- 无边框模式 -->
  <re-tab-bar class="demo-no-border" :bordered="false" :value="0">
  <re-tab-bar-item label="首页" icon="home" :value="0" />
  <re-tab-bar-item label="搜索" icon="search" :value="1" />

<!-- 自定义样式 -->
  <re-tab-bar class="demo-custom-style" customStyle="background-color: #f0f0f0;" :value="0">
  <re-tab-bar-item label="收藏" icon="star" :value="0" />
  <re-tab-bar-item label="设置" icon="setting" :value="1" />

<!-- 默认选中第二项 -->
  <re-tab-bar class="demo-value-1" :value="1">
  <re-tab-bar-item class="demo-v1-item-0" label="首页" icon="home" :value="0" />
  <re-tab-bar-item class="demo-v1-item-1" label="消息" icon="chat" :value="1" />

<!-- 固定在底部 -->
  <re-tab-bar class="demo-fixed" :fixed="true" :value="0">
  <re-tab-bar-item label="首页" icon="home" :value="0" />
  <re-tab-bar-item label="我的" icon="user" :value="1" />

<!-- 使用placeholder -->
  <re-tab-bar class="demo-placeholder" :placeholder="true" :value="0">
  <re-tab-bar-item label="首页" icon="home" :value="0" />
  <re-tab-bar-item label="应用" icon="app" :value="1" />

<!-- 关闭安全区适配 -->
  <re-tab-bar class="demo-no-safe" :safeAreaInsetBottom="false" :value="0">
  <re-tab-bar-item label="我的" icon="user" :value="0" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-tab-bar />。

API

TabBar Props

名称类型默认值描述必传
valuenumber0当前选中项的索引，支持 v-modelN
defaultValuenumber0默认选中项的索引N
fixedbooleanfalse是否固定在底部N
borderedbooleantrue是否显示顶部边框N
placeholderbooleanfalse是否开启占位，在内容区生成等高元素N
safeAreaInsetBottombooleantrue是否开启底部安全区适配N
shape"normal" | "round""normal"标签栏形状，可选值：normal/roundN
theme"normal" | "tag""normal"选项风格，可选值：normal/tag（tag 为胶囊选中样式）N
splitbooleantrue是否在项之间显示分割线N
activeColorstring"#0052d9"选中项高亮色（图标 / 文字 / 胶囊背景）N
customStylestring""自定义样式N

TabBar Events

名称参数描述
changevalue: number选中项变化时触发，参数为新选中项的索引
update:valuevalue: numberv-model 同步当前选中项索引

TabBar Slots

名称描述
default默认插槽

TabBarItem Props

名称类型默认值描述必传
valuenumber | string0当前值N
labelstring""-N
iconstring""图标，支持字体图标名称或图片地址N
iconSizestring"22px"-N
badgeTextstring""徽标文字：数字显示 count，非数字显示 content（如图标 / 纯文字场景自动适配位置）N
badgeDotbooleanfalse是否显示圆点徽标N
urlstring""点击后跳转的页面路径（需以 / 开头）N
linkTypestring"navigateTo"页面跳转类型：redirectTo / switchTab / reLaunch / navigateToN
subTabBarArray<UTSJSONObject> as Array<UTSJSONObject>二级菜单：{ value, label, url } 数组N
customStylestring""自定义样式N

TabBarItem Slots

名称描述
default默认插槽
icon自定义图标插槽
Steps 步骤条
步骤条组件，引导用户按照流程完成任务的导航条，支持水平和垂直方向
Tabs 选项卡
选项卡组件，用于内容分类切换，配合 re-tab-panel 使用。支持均分/非均分宽度、可滚动模式。