vant-weapp/packages/tab

Tab 标签页

使用指南

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

"usingComponents": {
  "van-tab": "path/to/vant-weapp/dist/tab/index",
  "van-tabs": "path/to/vant-weapp/dist/tabs/index"
}

代码演示

基础用法

默认情况下启用第一个标签，可以通过active设定当前激活的标签索引，在回调参数的event.detail中可以取得被点击标签的标题和索引

<van-tabs active="{{ active }}" bind:change="onChange">
  <van-tab title="标签 1">内容 1</van-tab>
  <van-tab title="标签 2">内容 2</van-tab>
  <van-tab title="标签 3">内容 3</van-tab>
  <van-tab title="标签 4">内容 4</van-tab>
</van-tabs>

Page({
  data: {
    active: 1
  },

  onChange(event) {
    wx.showToast({
      title: `切换到标签 ${event.detail.index + 1}`,
      icon: 'none'
    });
  }
});

横向滚动

多于 4 个标签时，Tab 可以横向滚动

<van-tabs active="{{ active }}">
  <van-tab title="标签 1">内容 1</van-tab>
  <van-tab title="标签 2">内容 2</van-tab>
  <van-tab title="标签 3">内容 3</van-tab>
  <van-tab title="标签 4">内容 4</van-tab>
  <van-tab title="标签 5">内容 5</van-tab>
  <van-tab title="标签 6">内容 6</van-tab>
</van-tabs>

禁用标签

设置disabled属性即可禁用标签。如果需要监听禁用标签的点击事件，可以在van-tabs上监听disabled事件

<van-tabs bind:disabled="onClickDisabled">
  <van-tab title="标签 1">内容 1</van-tab>
  <van-tab title="标签 2" disabled>内容 2</van-tab>
  <van-tab title="标签 3">内容 3</van-tab>
</van-tabs>

Page({
  onClickDisabled(event) {
    wx.showToast({
      title: `标签 ${event.detail.index + 1} 已被禁用`,
      icon: 'none'
    });
  }
});

样式风格

Tab支持两种样式风格：line和card，默认为line样式，可以通过type属性修改样式风格

<van-tabs type="card">
  <van-tab title="标签 1">内容 1</van-tab>
  <van-tab title="标签 2">内容 2</van-tab>
  <van-tab title="标签 3">内容 3</van-tab>
</van-tabs>

点击事件

可以在van-tabs上绑定click事件，在回调参数的event.detail中可以取得被点击标签的标题和索引

<van-tabs bind:click="onClick">
  <van-tab title="标签 1">内容 1</van-tab>
  <van-tab title="标签 2">内容 2</van-tab>
</van-tabs>

Page({
  onClick(event) {
    wx.showToast({
      title: `点击标签 ${event.detail.index + 1}`,
      icon: 'none'
    });
  }
});

粘性布局

通过sticky属性可以开启粘性布局，粘性布局下，当 Tab 滚动到顶部时会自动吸顶

<van-tabs sticky>
  <van-tab title="标签 1">内容 1</van-tab>
  <van-tab title="标签 2">内容 2</van-tab>
  <van-tab title="标签 3">内容 3</van-tab>
  <van-tab title="标签 4">内容 4</van-tab>
</van-tabs>

切换动画

可以通过animated来设置是否启用切换tab时的动画。

<van-tabs animated>
  <van-tab title="标签 1">内容 1</van-tab>
  <van-tab title="标签 2">内容 2</van-tab>
  <van-tab title="标签 3">内容 3</van-tab>
  <van-tab title="标签 4">内容 4</van-tab>
</van-tabs>

滑动切换

通过swipeable属性可以开启滑动切换标签页

<van-tabs swipeable>
  <van-tab title="标签 1">内容 1</van-tab>
  <van-tab title="标签 2">内容 2</van-tab>
  <van-tab title="标签 3">内容 3</van-tab>
  <van-tab title="标签 4">内容 4</van-tab>
</van-tabs>

Tabs API

参数	说明	类型	默认值
active	当前激活标签的索引	Number	0
color	标签颜色	String	#f44
z-index	z-index 层级	Number	1
type	样式风格，可选值为card	String	line
border	是否展示外边框，仅在line风格下生效	Boolean	true
duration	动画时间 (单位秒)	Number	0.3
line-width	底部条宽度 (px)	Number	与当前标签等宽
swipe-threshold	滚动阈值，设置标签数量超过多少个可滚动	Number	4
animated	是否使用动画切换 Tabs	Boolean	false
swipeable	是否开启手势滑动切换	Boolean	false
sticky	是否使用粘性定位布局	Boolean	false
offset-top	粘性定位布局下与顶部的最小距离，单位 px	Number	0
scroll-top	页面的scrollTop，粘性布局下必须要传入，单位 px	Number	0

Tab API

参数	说明	类型	默认值
title	标题	String	-
disabled	是否禁用标签	Boolean	false

Tab Slot

名称	说明
-	标签页内容

Tabs Event

事件名	说明	参数
bind:click	点击标签时触发	index：标签索引，title：标题
bind:change	当前激活的标签改变时触发	index：标签索引，title：标题
bind:disabled	点击被禁用的标签时触发	index：标签索引，title：标题
bind:scroll	滚动时触发	{ scrollTop: 距离顶部位置, isFixed: 是否吸顶 }

外部样式类

类名	说明
custom-class	根节点样式类

更新日志

版本	类型	内容
0.3.0	feature	新增组件
0.3.2	bugfix	修复部分情况下代码报错的问题
0.3.2	bugfix	修复 color 属性会改变未激活标签的颜色的问题
0.3.3	feature	新增 border 属性
0.3.3	feature	支持传入外部样式类
0.3.5	bugfix	修复 active 属性默认值错误的问题
0.3.7	feature	新增 z-index 属性