Tabbar 标签栏

使用指南

  1. import { Tabbar, TabbarItem } from 'vant';
  3. Vue.use(Tabbar).use(TabbarItem);

代码演示

基础用法

  1. <van-tabbar v-model="active">
  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>
  1. export default {
  2.   data() {
  3.     return {
  4.       active: 0
  5.     }
  6.   }
  7. }

自定义图标

通过 icon 插槽自定义图标，可以通过 slot-scope 判断标签是否选中

  1. <van-tabbar v-model="active">
  2.   <van-tabbar-item info="3">
  3.     <span>自定义</span>
  4.     <img
  5.       slot="icon"
  6.       slot-scope="props"
  7.       :src="props.active ? icon.active : icon.normal"
  8.     >
  9.   </van-tabbar-item>
  10.   <van-tabbar-item icon="search">标签</van-tabbar-item>
  11.   <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
  12. </van-tabbar>
  1. export default {
  2.   data() {
  3.     return {
  4.       active: 0,
  5.       icon: {
  6.         normal: '//img.yzcdn.cn/icon-normal.png',
  7.         active: '//img.yzcdn.cn/icon-active.png'
  8.       }
  9.     }
  10.   }
  11. }

自定义颜色

  1. <van-tabbar
  2.   v-model="active"
  3.   active-color="#07c160"
  4. >
  5.   <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  6.   <van-tabbar-item icon="search">标签</van-tabbar-item>
  7.   <van-tabbar-item icon="freinds-o">标签</van-tabbar-item>
  8.   <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
  9. </van-tabbar>

Tabbar API

参数说明类型默认值版本
v-model当前选中标签的索引Number--
fixed是否固定在底部Booleantrue-
z-index元素 z-indexNumber11.1.9
active-color选中标签的颜色String#1989fa1.5.1

Tabbar Event

事件名说明参数
change切换标签时触发active: 当前选中标签

TabbarItem API

参数说明类型默认值版本
icon图标名称或图片链接，可选值见 Icon 组件String--
dot是否显示小红点Boolean--
info图标右上角提示信息String | Number--
url跳转链接String--
to路由跳转对象，同 vue-router 的 toString | Object--
replace跳转时是否替换当前页面历史Stringfalse-

TabbarItem Slot

名称说明slot-scope
icon自定义图标active: 是否为选中标签

原文: https://youzan.github.io/vant/#/zh-CN/tabbar