Vant Tab 標(biāo)簽頁(yè)

引入

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

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

代碼演示

基礎(chǔ)用法

通過(guò)v-model綁定當(dāng)前激活標(biāo)簽對(duì)應(yīng)的索引值，默認(rèn)情況下啟用第一個(gè)標(biāo)簽

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

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

通過(guò)名稱匹配

在標(biāo)簽指定name屬性的情況下，v-model的值為當(dāng)前標(biāo)簽的name

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

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

標(biāo)簽欄滾動(dòng)

標(biāo)簽數(shù)量超過(guò) 4 個(gè)時(shí)，標(biāo)簽欄可以在水平方向上滾動(dòng)，切換時(shí)會(huì)自動(dòng)將當(dāng)前標(biāo)簽居中

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

禁用標(biāo)簽

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

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

import { Toast } from 'vant';

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

樣式風(fēng)格

Tab支持兩種樣式風(fēng)格：line和card，默認(rèn)為line樣式，可以通過(guò)type屬性修改樣式風(fēng)格

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

點(diǎn)擊事件

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

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

import { Toast } from 'vant';

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

粘性布局

通過(guò)sticky屬性可以開(kāi)啟粘性布局，粘性布局下，當(dāng) Tab 滾動(dòng)到頂部時(shí)會(huì)自動(dòng)吸頂

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

自定義標(biāo)簽

通過(guò) title 插槽可以自定義標(biāo)簽內(nèi)容

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

切換動(dòng)畫

通過(guò)animated屬性可以開(kāi)啟切換標(biāo)簽內(nèi)容時(shí)的轉(zhuǎn)場(chǎng)動(dòng)畫

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

滑動(dòng)切換

通過(guò)swipeable屬性可以開(kāi)啟滑動(dòng)切換標(biāo)簽頁(yè)

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

滾動(dòng)導(dǎo)航

通過(guò)scrollspy屬性可以開(kāi)啟滾動(dòng)導(dǎo)航模式，該模式下，內(nèi)容將會(huì)平鋪展示

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

API

Tabs Props

Tab Props

Tabs Events

Tabs 方法

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

Tabs Slots

Tab Slots