Skip to content

Tabbar 标签栏

底部导航栏,用于在不同页面之间进行切换。

基础用法

v-model 为绑定值,表示选中标签的索引值或者名称。

html
<wd-tabbar v-model="tabbar">
  <wd-tabbar-item title="首页" icon="home"></wd-tabbar-item>
  <wd-tabbar-item title="分类" icon="cart"></wd-tabbar-item>
  <wd-tabbar-item title="我的" icon="user"></wd-tabbar-item>
</wd-tabbar>
typescript
import { ref } from 'vue'

const tabbar = ref(1)

通过名称匹配

通过设置 name 属性,可以通过名称匹配选中标签。

html
<wd-tabbar v-model="tabbar">
  <wd-tabbar-item name="home" title="首页" icon="home"></wd-tabbar-item>
  <wd-tabbar-item name="cart" title="分类" icon="cart"></wd-tabbar-item>
  <wd-tabbar-item name="setting" title="设置" icon="setting"></wd-tabbar-item>
  <wd-tabbar-item name="user" title="我的" icon="user"></wd-tabbar-item>
</wd-tabbar>
typescript
import { ref } from 'vue'

const tabbar = ref('home')

徽标提示

通过设置 value 属性,可以显示徽标提示,而设置 is-dot 属性后,会在图标右上角展示一个小红点。

html
<wd-tabbar v-model="tabbar">
  <wd-tabbar-item is-dot :value="2" title="点状" icon="home"></wd-tabbar-item>
  <wd-tabbar-item :value="2" icon="cart" title="分类"></wd-tabbar-item>
  <wd-tabbar-item :value="30" title="我的" icon="user"></wd-tabbar-item>
  <wd-tabbar-item :value="200" title="最大值" icon="user"></wd-tabbar-item>
</wd-tabbar>
typescript
import { ref } from 'vue'

const tabbar = ref(1)

悬浮标签栏

通过设置 shape 属性为 round,可以将标签栏设置为悬浮样式。

html
<wd-tabbar shape="round" v-model="tabbar">
  <wd-tabbar-item title="首页" is-dot :value="2" icon="home"></wd-tabbar-item>
  <wd-tabbar-item title="分类" :value="2" icon="cart"></wd-tabbar-item>
  <wd-tabbar-item title="相册" :value="30" icon="photo"></wd-tabbar-item>
  <wd-tabbar-item title="我的" :value="200" icon="user"></wd-tabbar-item>
</wd-tabbar>
typescript
import { ref } from 'vue'

const tabbar = ref(1)

自定义图标

通过使用 <template #icon> 可以自定义标签页的图标。

html
<wd-tabbar v-model="tabbar">
  <wd-tabbar-item :value="2" title="首页" icon="home"></wd-tabbar-item>
  <wd-tabbar-item :value="2" icon="cart" title="分类">
    <template #icon>
      <wd-img round height="40rpx" width="40rpx" src="https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg"></wd-img>
    </template>
  </wd-tabbar-item>
  <wd-tabbar-item :value="3" title="我的" icon="user"></wd-tabbar-item>
</wd-tabbar>
typescript
import { ref } from 'vue'

const tabbar = ref(1)

自定义颜色

通过设置 active-colorinactive-color 属性,可以自定义激活和未激活标签的颜色。

html
<wd-tabbar v-model="tabbar" active-color="#ee0a24" inactive-color="#7d7e80">
  <wd-tabbar-item is-dot :value="2" title="点状" icon="home"></wd-tabbar-item>
  <wd-tabbar-item :value="2" icon="cart" title="分类"></wd-tabbar-item>
  <wd-tabbar-item :value="30" title="我的" icon="user"></wd-tabbar-item>
  <wd-tabbar-item :value="200" title="最大值" icon="photo"></wd-tabbar-item>
  <wd-tabbar-item :value="10" title="客服" icon="chat"></wd-tabbar-item>
</wd-tabbar>
typescript
import { ref } from 'vue'

const tabbar = ref(1)

监听切换事件

通过监听 change 事件,可以获取选中标签的值。

html
<wd-tabbar v-model="tabbar" @change="handleChange1" active-color="#ee0a24" inactive-color="#7d7e80">
  <wd-tabbar-item title="首页" icon="home"></wd-tabbar-item>
  <wd-tabbar-item title="分类" icon="cart"></wd-tabbar-item>
  <wd-tabbar-item title="我的" icon="user"></wd-tabbar-item>
  <wd-tabbar-item title="相册" icon="photo"></wd-tabbar-item>
  <wd-tabbar-item title="客服" icon="chat"></wd-tabbar-item>
</wd-tabbar>
typescript
import { ref } from 'vue'

const tabbar = ref(1)

function handleChange1({ value }: { value: string }) {
  show(`选中标签:${value}`)
}

固定底部

通过设置 fixed 属性,可以将标签栏固定在底部;通过设置 placeholder 属性,可以在固定在底部时在标签位置生成一个等高的占位元素。

html
<wd-tabbar fixed v-model="tabbar" bordered safeAreaInsetBottom placeholder>
  <wd-tabbar-item :value="2" is-dot title="首页" icon="home"></wd-tabbar-item>
  <wd-tabbar-item title="分类" icon="cart"></wd-tabbar-item>
  <wd-tabbar-item title="我的" icon="user"></wd-tabbar-item>
  <wd-tabbar-item :value="200" title="相册" icon="photo"></wd-tabbar-item>
  <wd-tabbar-item :value="10" title="客服" icon="chat"></wd-tabbar-item>
</wd-tabbar>
typescript
import { ref } from 'vue'

const tabbar = ref(1)

Tabbar Attributes

参数说明类型可选值默认值最低版本
v-model/modelValue选中标签的索引值或者名称number / string-00.1.27
fixed是否固定在底部boolean-false0.1.27
safeAreaInsetBottom是否设置底部安全距离(iPhone X 类型的机型)boolean-false0.1.27
bordered是否显示顶部边框boolean-true0.1.27
shape标签栏的形状TabbarShape'default' / 'round''default'0.1.27
activeColor激活标签的颜色string--0.1.27
inactiveColor未激活标签的颜色string--0.1.27
placeholder固定在底部时,是否在标签位置生成一个等高的占位元素boolean-false0.1.27
zIndextabbar组件的层级number-5000.1.27

Tabbar Events

事件名称说明参数最低版本
changetabbar标签切换时触发{ value }0.1.27

Tabbar 外部样式类

类名说明最低版本
custom-class根节点样式类0.1.27
custom-style根节点样式0.1.27

TabbarItem Attributes

参数说明类型可选值默认值最低版本
title标签页的标题string--0.1.27
name唯一标识符string / number--0.1.27
icon图标string--0.1.27
value徽标显示值number / string--0.1.27
isDot是否点状徽标boolean-false0.1.27
max徽标最大值number-990.1.27
badge-props自定义徽标的属性,传入的对象会被透传给 Badge 组件的 propsBadgeProps--0.1.50

TabbarItem Slots

name说明参数最低版本
icon自定义图标active: boolean0.1.27

TabbarItem 外部样式类

类名说明最低版本
custom-class根节点样式类0.1.27
custom-style根节点样式0.1.27

Released under the MIT License.

Released under the MIT License.