Tabbar 标签栏

使用指南

在 app.json 或 index.json 中引入组件

  1. "usingComponents": {
  2.   "van-tabbar": "/packages/tabbar/index",
  3.   "van-tabbar-item": "/packages/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" 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. Page({
  2.   data: {
  3.     active: 0
  4.   },
  5.   // event.detail 的值为当前选中项的索引
  6.   onChange(event) {
  7.     console.log(event.detail);
  8.   }
  9. });

自定义图标

可以通过 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.     />
  8.     <image
  9.       slot="icon-active"
  10.       src="{{ icon.active }}"
  11.       mode="aspectFit"
  12.     />
  13.     自定义
  14.   </van-tabbar-item>
  15.   <van-tabbar-item icon="search">标签</van-tabbar-item>
  16.   <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
  17. </van-tabbar>
  1. Page({
  2.   data: {
  3.     active: 0,
  4.     icon: {
  5.       normal: '//img.yzcdn.cn/icon-normal.png',
  6.       active: '//img.yzcdn.cn/icon-active.png'
  7.     }
  8.   },
  10.   onChange(event) {
  11.     console.log(event.detail);
  12.   }
  13. });

自定义颜色

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

Tabbar API

参数说明类型默认值
active当前选中标签的索引Number-
active-color选中标签的颜色String#1989fa
fixed是否固定在底部Booleantrue
z-index元素 z-indexNumber1
safe-area-inset-bottom是否适配iPhoneXBooleantrue

Tabbar Event

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

TabbarItem API

参数说明类型默认值
icon图标名称或图片链接，可选值见 Icon 组件String-
dot是否显示小红点Boolean-
info图标右上角提示信息String | Number-

TabbarItem Slot

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

更新日志

版本类型内容
0.1.1feature新增组件
0.2.1bugfix修复 z-index 不生效的问题

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