代码演示

    基础用法

    1. <van-tabs v-model="active">
    2.   <van-tab v-for="index in 4" :title="'选项 ' + index">
    3.     内容 {{ index }}
    4.   </van-tab>
    5. </van-tabs>
    1. export default {
    2.   data() {
    3.       active: 2
    4.     };
    5.   }
    6. }

    横向滚动

    默认情况下多于4个tab时，可以横向滚动tab。可以通过设置swipe-threshold这个阙值，多于这个阙值时，tab就会支持横向滚动。

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

    禁用标签

    在对应的van-tab上设置disabled属性即可。如果需要监听禁用事件，可以在van-tabs上监听disabled事件。

    1. export default {
    2.   methods: {
    3.     onClickDisabled(index, title) {
    4.       this.- toast(title + '已被禁用');
    5.     }
    6.   }

    样式风格

    1. <van-tabs type="card">
    2.   <van-tab v-for="index in 4" :title="'选项 ' + index">
    3.     内容 {{ index }}
    4.   </van-tab>
    5. </van-tabs>

    点击事件

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

    1.   <van-tab v-for="index in 4" :title="'选项 ' + index">
    2.     内容 {{ index }}
    3.   </van-tab>
    4. </van-tabs>

    粘性布局

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

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

    自定义标签

    1. <van-tabs v-model="active">
    2.   <van-tab v-for="index in 2">
    3.     <div slot="title">
    5.     </div>
    6.     内容 {{ index }}
    7.   </van-tab>
    8. </van-tabs>

    滑动切换

    通过swipeable属性可以开启滑动切换tab

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

    Tab API

    Tabs Event

    原文: