Tab 标签页

基础用法

通过active设定当前激活标签对应的索引值，默认情况下启用第一个标签

<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({
    active: 1
  },
  onChange(event) {
    wx.showToast({
      title: `切换到标签 ${event.detail.name}`,
      icon: 'none'
    });
  }
});

通过名称匹配

在标签指定name属性的情况下，active的值为当前标签的name，默认启用第一个标签

<van-tabs active="a">
  <van-tab title="标签 1" name="a">内容 1</van-tab>
  <van-tab title="标签 2" name="b">内容 2</van-tab>
  <van-tab title="标签 3" name="c">内容 3</van-tab>
</van-tabs>

横向滚动

禁用标签

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

  <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.name} 已被禁用`,
      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>

点击事件

Page({
  onClick(event) {
    wx.showToast({
      title: `点击标签 ${event.detail.name}`,
      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-tabs>

滑动切换

API

Tab Props

Tabs Slot

Tab Slot

Tabs Event