Tabbar 标签栏

介绍

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

引入

app.jsonindex.json中引入组件,详细介绍见快速上手

  1. "usingComponents": {
  2. "van-tabbar": "@vant/weapp/tabbar/index",
  3. "van-tabbar-item": "@vant/weapp/tabbar-item/index"
  4. }

代码演示

基础用法

  1. <van-tabbar active="{{ active }}" bind:change="onChange">
  2. <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  3. <van-tabbar-item icon="search">标签</van-tabbar-item>
  4. <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
  5. <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
  6. </van-tabbar>
  1. Page({
  2. data: {
  3. active: 0,
  4. },
  5. onChange(event) {
  6. // event.detail 的值为当前选中项的索引
  7. this.setData({ active: event.detail });
  8. },
  9. });

通过名称匹配

在标签指定name属性的情况下,v-model的值为当前标签的name

  1. <van-tabbar active="{{ active }}" bind:change="onChange">
  2. <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>
  3. <van-tabbar-item name="search" icon="search">标签</van-tabbar-item>
  4. <van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
  5. <van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>
  6. </van-tabbar>
  1. Page({
  2. data: {
  3. active: 'home',
  4. },
  5. onChange(event) {
  6. this.setData({ active: event.detail });
  7. },
  8. });

显示徽标

  1. <van-tabbar active="{{ active }}" bind:change="onChange">
  2. <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  3. <van-tabbar-item icon="search" dot>标签</van-tabbar-item>
  4. <van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>
  5. <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
  6. </van-tabbar>

自定义图标

可以通过 slot 自定义图标,其中 icon slot 代表未选中状态下的图标,icon-active slot 代表选中状态下的图标。

  1. <van-tabbar active="{{ active }}" bind:change="onChange">
  2. <van-tabbar-item info="3">
  3. <image
  4. slot="icon"
  5. src="{{ icon.normal }}"
  6. mode="aspectFit"
  7. style="width: 30px; height: 18px;"
  8. />
  9. <image
  10. slot="icon-active"
  11. src="{{ icon.active }}"
  12. mode="aspectFit"
  13. style="width: 30px; height: 18px;"
  14. />
  15. 自定义
  16. </van-tabbar-item>
  17. <van-tabbar-item icon="search">标签</van-tabbar-item>
  18. <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
  19. </van-tabbar>
  1. Page({
  2. data: {
  3. active: 0,
  4. icon: {
  5. normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
  6. active: 'https://img.yzcdn.cn/vant/user-active.png',
  7. },
  8. },
  9. onChange(event) {
  10. this.setData({ active: event.detail });
  11. },
  12. });

自定义颜色

  1. <van-tabbar
  2. active="{{ active }}"
  3. active-color="#07c160"
  4. inactive-color="#000"
  5. bind:change="onChange"
  6. >
  7. <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  8. <van-tabbar-item icon="search">标签</van-tabbar-item>
  9. <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
  10. <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
  11. </van-tabbar>
  1. Page({
  2. data: {
  3. active: 0,
  4. },
  5. onChange(event) {
  6. this.setData({ active: event.detail });
  7. },
  8. });

切换标签事件

  1. <van-tabbar active="{{ active }}" bind:change="onChange">
  2. <van-tabbar-item icon="home-o">标签1</van-tabbar-item>
  3. <van-tabbar-item icon="search">标签2</van-tabbar-item>
  4. <van-tabbar-item icon="friends-o">标签3</van-tabbar-item>
  5. <van-tabbar-item icon="setting-o">标签4</van-tabbar-item>
  6. </van-tabbar>
  1. Page({
  2. data: {
  3. active: 0,
  4. },
  5. onClick(event) {
  6. wx.showToast({
  7. title: `点击标签 ${event.detail + 1}`,
  8. icon: 'none',
  9. });
  10. },
  11. });

结合自定义 tabBar

请参考 微信官方文档代码片段

API

Tabbar Props

参数说明类型默认值版本
active当前选中标签的索引number--
fixed是否固定在底部booleantrue-
placeholder固定在底部时,是否在标签位置生成一个等高的占位元素booleanfalse
border是否展示外边框booleantrue-
z-index元素 z-indexnumber1-
active-color选中标签的颜色string#1989fa-
inactive-color未选中标签的颜色string#7d7e80-
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue-

Tabbar Event

事件名说明参数
bind:change切换标签时触发event.detail: 当前选中标签的名称或索引值

TabbarItem Props

参数说明类型默认值版本
name标签名称,作为匹配的标识符string | number当前标签的索引值-
icon图标名称或图片链接,可选值见 Icon 组件string--
icon-prefix图标类名前缀,同 Icon 组件的 class-prefix 属性stringvan-icon
dot是否显示小红点boolean--
info图标右上角提示信息string | number--

TabbarItem Slot

名称说明
icon未选中时的图标
icon-active选中时的图标

Tabbar 标签栏 - 图1