Wot Design Uni 上新 Tabbar 标签栏组件 ，赶快进来看看效果吧！

Tabbar 标签栏

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

何时使用

• 需要定制底部导航栏时

地址

Github
文档网站
插件市场
QQ群

先看交互效果

基础用法

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

<wd-tabbar v-model="tabbar1">
  <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>

import { ref } from 'vue'

const tabbar1 = ref('home')

通过名称匹配

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

<wd-tabbar v-model="tabbar1">
  <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>

徽标提示

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

<wd-tabbar v-model="tabbar5">
  <wd-tabbar-item name="1" is-dot :value="2" title="点状" icon="home"></wd-tabbar-item>
  <wd-tabbar-item name="2" :value="2" icon="cart" title="分类"></wd-tabbar-item>
  <wd-tabbar-item name="3" :value="30" title="我的" icon="user"></wd-tabbar-item>
  <wd-tabbar-item name="4" :value="200" title="最大值" icon="user"></wd-tabbar-item>
</wd-tabbar>

悬浮标签栏

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

<wd-tabbar shape="round" v-model="tabbar2">
  <wd-tabbar-item name="1" title="首页" is-dot :value="2" icon="home"></wd-tabbar-item>
  <wd-tabbar-item name="2" title="分类" :value="2" icon="cart"></wd-tabbar-item>
  <wd-tabbar-item name="3" title="相册" :value="30" icon="photo"></wd-tabbar-item>
  <wd-tabbar-item name="4" title="我的" :value="200" icon="user"></wd-tabbar-item>
</wd-tabbar>

自定义图标

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

<wd-tabbar v-model="tabbar4">
  <wd-tabbar-item name="1" :value="2" title="首页" icon="home"></wd-tabbar-item>
  <wd-tabbar-item name="2" :value="2" icon="cart" title="分类">
    <template #icon>
      <wd-img round height="40rpx" width="40rpx" src="https://unpkg.com/wot-design-uni-assets/panda.jpg"></wd-img>
    </template>
  </wd-tabbar-item>
  <wd-tabbar-item name="3" :value="3" title="我的" icon="user"></wd-tabbar-item>
</wd-tabbar>

自定义颜色

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

<wd-tabbar v-model="tabbar5" active-color="#ee0a24" inactive-color="#7d7e80">
  <wd-tabbar-item name="1" is-dot :value="2" title="点状" icon="home"></wd-tabbar-item>
  <wd-tabbar-item name="2" :value="2" icon="cart" title="分类"></wd-tabbar-item>
  <wd-tabbar-item name="3" :value="30" title="我的" icon="user"></wd-tabbar-item>
  <wd-tabbar-item name="4" :value="200" title="最大值" icon="photo"></wd-tabbar-item>
  <wd-tabbar-item name="5" :value="10" title="客服" icon="chat"></wd-tabbar-item>
</wd-tabbar>

监听切换事件

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

<wd-tabbar v-model="tabbar6" @change="handleChange1" active-color="#ee0a24" inactive-color="#7d7e80">
  <wd-tabbar-item name="1" title="首页" icon="home"></wd-tabbar-item>
  <wd-tabbar-item name="2" title="分类" icon="cart"></wd-tabbar-item>
  <wd-tabbar-item name="3" title="我的" icon="user"></wd-tabbar-item>
  <wd-tabbar-item name="4" title="相册" icon="photo"></wd-tabbar-item>
  <wd-tabbar-item name="5" title="客服" icon="chat"></wd-tabbar-item>
</wd-tabbar>

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

固定底部

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

<wd-tabbar fixed v-model="tabbar3" bordered safeAreaInsetBottom placeholder>
  <wd-tabbar-item name="1" :value="2" is-dot title="首页" icon="home"></wd-tabbar-item>
  <wd-tabbar-item name="2" title="分类" icon="cart"></wd-tabbar-item>
  <wd-tabbar-item name="3" title="我的" icon="user"></wd-tabbar-item>
  <wd-tabbar-item name="4" :value="200" title="相册" icon="photo"></wd-tabbar-item>
  <wd-tabbar-item name="5" :value="10" title="客服" icon="chat"></wd-tabbar-item>
</wd-tabbar>

Tabbar Attributes

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

Tabbar Events

事件名称	说明	参数	最低版本
change	tabbar标签切换时触发	{ 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	-	false	0.1.27
max	徽标最大值	number	-	99	0.1.27

TabbarItem Slots

name	说明	参数	最低版本
icon	自定义图标	active: boolean	0.1.27

TabbarItem 外部样式类

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

地址

Github
文档网站
插件市场
QQ群