Vant Tab 標簽頁

引入

import Vue from 'vue';
import { Tab, Tabs } from 'vant';

Vue.use(Tab);
Vue.use(Tabs);

代碼演示

基礎(chǔ)用法

通過v-model綁定當前激活標簽對應(yīng)的索引值，默認情況下啟用第一個標簽

<van-tabs v-model="active">
  <van-tab title="標簽 1">內(nèi)容 1</van-tab>
  <van-tab title="標簽 2">內(nèi)容 2</van-tab>
  <van-tab title="標簽 3">內(nèi)容 3</van-tab>
  <van-tab title="標簽 4">內(nèi)容 4</van-tab>
</van-tabs>

export default {
  data() {
    return {
      active: 2
    };
  }
}

通過名稱匹配

在標簽指定name屬性的情況下，v-model的值為當前標簽的name

<van-tabs v-model="activeName">
  <van-tab title="標簽 1" name="a">內(nèi)容 1</van-tab>
  <van-tab title="標簽 2" name="b">內(nèi)容 2</van-tab>
  <van-tab title="標簽 3" name="c">內(nèi)容 3</van-tab>
</van-tabs>

export default {
  data() {
    return {
      activeName: 'a'
    };
  }
}

標簽欄滾動

標簽數(shù)量超過 4 個時，標簽欄可以在水平方向上滾動，切換時會自動將當前標簽居中

<van-tabs>
  <van-tab v-for="index in 8" :title="'標簽 ' + index">
    內(nèi)容 {{ index }}
  </van-tab>
</van-tabs>

禁用標簽

設(shè)置disabled屬性即可禁用標簽。如果需要監(jiān)聽禁用標簽的點擊事件，可以在van-tabs上監(jiān)聽disabled事件

<van-tabs @disabled="onClickDisabled">
  <van-tab title="標簽 1">內(nèi)容 1</van-tab>
  <van-tab title="標簽 2" disabled>內(nèi)容 2</van-tab>
  <van-tab title="標簽 3">內(nèi)容 3</van-tab>
</van-tabs>

import { Toast } from 'vant';

export default {
  methods: {
    onClickDisabled(name, title) {
      Toast(name + '已被禁用');
    }
  }
};

樣式風格

Tab支持兩種樣式風格：line和card，默認為line樣式，可以通過type屬性修改樣式風格

<van-tabs type="card">
  <van-tab title="標簽 1">內(nèi)容 1</van-tab>
  <van-tab title="標簽 2">內(nèi)容 2</van-tab>
  <van-tab title="標簽 3">內(nèi)容 3</van-tab>
</van-tabs>

點擊事件

可以在van-tabs上綁定click事件，事件傳參為標簽對應(yīng)的索引和標題

<van-tabs @click="onClick">
  <van-tab title="標簽 1">內(nèi)容 1</van-tab>
  <van-tab title="標簽 2">內(nèi)容 2</van-tab>
</van-tabs>

import { Toast } from 'vant';

export default {
  methods: {
    onClick(name, title) {
      Toast(title);
    }
  }
};

粘性布局

通過sticky屬性可以開啟粘性布局，粘性布局下，當 Tab 滾動到頂部時會自動吸頂

<van-tabs v-model="active" sticky>
  <van-tab v-for="index in 4" :title="'選項 ' + index">
    內(nèi)容 {{ index }}
  </van-tab>
</van-tabs>

自定義標簽

通過 title 插槽可以自定義標簽內(nèi)容

<van-tabs v-model="active">
  <van-tab v-for="index in 2">
    <div slot="title">
      <van-icon name="more-o" />選項
    </div>
    內(nèi)容 {{ index }}
  </van-tab>
</van-tabs>

切換動畫

通過animated屬性可以開啟切換標簽內(nèi)容時的轉(zhuǎn)場動畫

<van-tabs v-model="active" animated>
  <van-tab v-for="index in 4" :title="'選項 ' + index">
    內(nèi)容 {{ index }}
  </van-tab>
</van-tabs>

滑動切換

通過swipeable屬性可以開啟滑動切換標簽頁

<van-tabs v-model="active" swipeable>
  <van-tab v-for="index in 4" :title="'選項 ' + index">
    內(nèi)容 {{ index }}
  </van-tab>
</van-tabs>

滾動導航

通過scrollspy屬性可以開啟滾動導航模式，該模式下，內(nèi)容將會平鋪展示

<van-tabs v-model="active" scrollspy sticky>
  <van-tab v-for="index in 8" :title="'選項 ' + index">
    內(nèi)容 {{ index }}
  </van-tab>
</van-tabs>

API

Tabs Props

Tab Props

Tabs Events

Tabs 方法

通過 ref 可以獲取到 Tabs 實例并調(diào)用實例方法，詳見 組件實例方法

Tabs Slots

Tab Slots