Tab 标签页

引入

  1. import{Tab,Tabs}from'vant';
  2. Vue.use(Tab).use(Tabs);

代码演示

基础用法

默认情况下启用第一个标签,可以通过v-model绑定当前激活的标签索引

  1. <van-tabsv-model="active">
  2. <van-tabtitle="标签 1">内容 1</van-tab>
  3. <van-tabtitle="标签 2">内容 2</van-tab>
  4. <van-tabtitle="标签 3">内容 3</van-tab>
  5. <van-tabtitle="标签 4">内容 4</van-tab>
  6. </van-tabs>
  1. exportdefault{
  2. data(){
  3. return{
  4. active:2
  5. };
  6. }
  7. }

横向滚动

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

  1. <van-tabs>
  2. <van-tabv-for="index in 8" :title="'标签 ' + index">
  3. 内容 {{ index }}
  4. </van-tab>
  5. </van-tabs>

禁用标签

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

  1. <van-tabs @disabled="onClickDisabled">
  2. <van-tabtitle="标签 1">内容 1</van-tab>
  3. <van-tabtitle="标签 2"disabled>内容 2</van-tab>
  4. <van-tabtitle="标签 3">内容 3</van-tab>
  5. </van-tabs>
  1. exportdefault{
  2. methods:{
  3. onClickDisabled(index, title){
  4. this.$toast(title +'已被禁用');
  5. }
  6. }
  7. };

样式风格

Tab支持两种样式风格:linecard,默认为line样式,可以通过type属性修改样式风格

  1. <van-tabstype="card">
  2. <van-tabtitle="标签 1">内容 1</van-tab>
  3. <van-tabtitle="标签 2">内容 2</van-tab>
  4. <van-tabtitle="标签 3">内容 3</van-tab>
  5. </van-tabs>

点击事件

可以在van-tabs上绑定click事件,事件传参为标签对应的索引和标题

  1. <van-tabs @click="onClick">
  2. <van-tabtitle="标签 1">内容 1</van-tab>
  3. <van-tabtitle="标签 2">内容 2</van-tab>
  4. </van-tabs>
  1. exportdefault{
  2. methods:{
  3. onClick(index, title){
  4. this.$toast(title);
  5. }
  6. }
  7. };

粘性布局

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

  1. <van-tabsv-model="active"sticky>
  2. <van-tabv-for="index in 4" :title="'选项 ' + index">
  3. 内容 {{ index }}
  4. </van-tab>
  5. </van-tabs>

自定义标签

通过 title 插槽可以自定义标签内容

  1. <van-tabsv-model="active">
  2. <van-tabv-for="index in 2">
  3. <divslot="title">
  4. <van-iconname="more-o"/>选项
  5. </div>
  6. 内容 {{ index }}
  7. </van-tab>
  8. </van-tabs>

切换动画

通过animated属性可以开启切换标签内容时的转场动画

  1. <van-tabsv-model="active"animated>
  2. <van-tabv-for="index in 4" :title="'选项 ' + index">
  3. 内容 {{ index }}
  4. </van-tab>
  5. </van-tabs>

滑动切换

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

  1. <van-tabsv-model="active"swipeable>
  2. <van-tabv-for="index in 4" :title="'选项 ' + index">
  3. 内容 {{ index }}
  4. </van-tab>
  5. </van-tabs>

API

Tabs Props

参数说明类型默认值版本
v-model当前标签的索引StringNumber01.0.6
type样式类型,可选值为cardStringline-
duration动画时间,单位秒Number0.3-
background标签栏背景色Stringwhite1.6.5
line-width底部条宽度,单位 pxNumber-1.1.1
line-height底部条高度,单位 pxNumber31.5.0
color标签主题色String#f441.2.0
title-active-color标题选中态颜色String-1.6.5
title-inactive-color标题默认态颜色String-1.6.5
swipe-threshold滚动阈值,标签数量超过多少个可滚动Number4-
offset-top粘性定位布局下与顶部的最小距离,单位 pxNumber01.1.15
animated是否开启切换标签内容时的转场动画Booleanfalse1.4.5
border是否显示标签栏外边框,仅在type="line"时有效Booleantrue2.0.0
ellipsis是否省略过长的标题文字Booleantrue1.5.0
sticky是否使用粘性定位布局Booleanfalse-
swipeable是否开启手势滑动切换Booleanfalse1.0.0
lazy-render是否开启标签页内容延迟渲染Booleantrue1.6.6

Tab Props

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

Tabs Slots

名称说明
nav-left标题左侧内容
nav-right标题右侧内容

Tab Slots

名称说明
default标签页内容
title自定义标签

Tabs Events

事件名说明回调参数
click点击标签时触发index:标签索引,title:标题
change当前激活的标签改变时触发index:标签索引,title:标题
disabled点击被禁用的标签时触发index:标签索引,title:标题
scroll滚动时触发,仅在 sticky 模式下生效{ scrollTop: 距离顶部位置, isFixed: 是否吸顶 }

Tab 标签页 - 图1