簡易實踐的vue自定義tab入門

本文基于vue官方文檔,分別為:動態(tài)組件 & 異步組件插槽兔沃、進入/離開 & 列表過渡 章節(jié)鏈接描述

要想實現tab動畫,首先要了解vue中哪些元素/那些組件適合在那些條件下實現動畫效果

  • 條件渲染 (使用 v-if)

  • 條件展示 (使用 v-show)

  • 動態(tài)組件

  • 組件根節(jié)點

vue官方文檔中有這樣一個例子


<div id="demo">

  <button v-on:click="show = !show">

    Toggle

  </button>

  <transition name="fade"><!--用transition包裹要添加動畫的元素/組件-->

    <p v-if="show">hello</p>

  </transition>

</div>

當你在transition上添加指定的name后啃沪,vue在進入/離開的過渡中粘拾,會有 6 個 class 切換,分別為:

name-enter创千、name-enter-active缰雇、name-enter-to入偷、name-leave、name-leave-active械哟、name-leave-to

如圖所示:

image

v-enter:定義進入過渡的開始狀態(tài)疏之。在元素被插入之前生效,在元素被插入之后的下一幀移除暇咆。

v-enter-active:定義進入過渡生效時的狀態(tài)锋爪。在整個進入過渡的階段中應用,在元素被插入之前生效爸业,在過渡/動畫完成之后移除其骄。這個類可以被用來定義進入過渡的過程時間,延遲和曲線函數扯旷。

v-enter-to: 2.1.8版及以上 定義進入過渡的結束狀態(tài)拯爽。在元素被插入之后下一幀生效 (與此同時 v-enter

被移除),在過渡/動畫完成之后移除钧忽。

v-leave: 定義離開過渡的開始狀態(tài)毯炮。在離開過渡被觸發(fā)時立刻生效,下一幀被移除耸黑。

v-leave-active:定義離開過渡生效時的狀態(tài)桃煎。在整個離開過渡的階段中應用,在離開過渡被觸發(fā)時立刻生效大刊,在過渡/動畫完成之后移除为迈。這個類可以被用來定義離開過渡的過程時間,延遲和曲線函數奈揍。

v-leave-to: 2.1.8版及以上 定義離開過渡的結束狀態(tài)曲尸。在離開過渡被觸發(fā)之后下一幀生效 (與此同時 v-leave

被刪除),在過渡/動畫完成之后移除男翰。

所以我們要想實現tab切換動畫另患,只需要在transition中添加我們每個單獨tab頁的子組件

1.用ul(無序列表)創(chuàng)建tab上方導航

    <!-- 標題導航 -->

    <ul class="tabNav">

      <li v-for="(item, index) in tabs" :class="{'active' : tabIndex === index}" @click="changeTab(index)">{{item.desc}}</li>

    </ul>

data中的定義


data () {

    return {

      currentTabComponent: 'tab1',

      // tab頁默認顯示第一項

      tabIndex: 0,

      transitionName: ''

      // tab根據既定格式定義

      tabs: [

        {

          id: 'tab1',

          desc: '首頁'

        },

        {

          id: 'tab2',

          desc: '聯(lián)系我們'

        },

        {

          id: 'tab3',

          desc: '與我相關'

        }

      ]

    }

}

設置li橫向排布,我創(chuàng)建的時候是把每個導航名稱放在data里蛾绎,用v-for做循環(huán)

2.具體設置每個tab頁

image

```

<div class="content">

<keep-alive>

<transition :name="transitionName">

  <component v-bind:is="currentTabComponent"></component>

</transition>

</keep-alive>

</div>


組件功能是vue項目的一大特色昆箕。組件可以擴展html元素,可以封裝可重用的代碼租冠。我們用is特性來擴展鹏倘,從而達到可以在這些受限制的html元素中使用。is會將currentTabComponent的值轉換成指定的組件形式:

如果currentTabComponent為my-component

轉化后為:

在tab導航點擊時修改tabIndex顽爹,此時監(jiān)聽tabIndex的變化纤泵,當目的值>原始值,向右滑動镜粤,反之向左滑動

***```***

tabIndex (to, from) {

  let that = this;

  that.transitionName = (to > from) ? 'forward' : 'backward';

}

設置vue動畫六個狀態(tài)的class的效果捏题,此項目中因為存在兩種滑動狀態(tài)玻褪,所以有12個class


.forward-enter-active,.forward-leave-active{

  transition: 0.5s all ease;

  transform: translateX(0);

}

.forward-enter{

    transform: translateX(100%);

}

.forward-enter-to{

    transform: translateX(0);

}

.forward-leave {

    transform: translate3d(0, 0, 0);

}

.forward-leave-to {

    transform: translate3d(-100%, 0, 0);

}

.backward-enter-active, .backward-leave-active {

  transition: all 0.5s;

}

.backward-leave {

  transform: translate3d(0, 0, 0);

}

.backward-leave-to {

  transform: translate3d(100%, 0, 0);

}

.backward-enter {

  transform: translate3d(-100%, 0, 0);

}

.backward-enter-to {

  transform: translate3d(0, 0, 0);

}

image

遇到問題:

在兩個tab頁相互切換時,當前div沒被移走公荧,將會導致下一個將會一直存在于當前div消失才一上來带射,所以我用了position:absolute,使每個div都飄在上面循狰,但是遇到的問題是最外層的盒子不能隨內層單個tab頁高度變化窟社,所以我用了js動態(tài)把tab頁高度賦值給外層div,目前還沒想到更好的方案绪钥。

最后我封裝了一下組件灿里,使用時只需要傳入tab的標題數組和單獨的tab頁即可使用

??:github地址可查看代碼github

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市程腹,隨后出現的幾起案子钠四,更是在濱河造成了極大的恐慌,老刑警劉巖跪楞,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異侣灶,居然都是意外死亡甸祭,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門褥影,熙熙樓的掌柜王于貴愁眉苦臉地迎上來池户,“玉大人,你說我怎么就攤上這事凡怎⌒=梗” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵统倒,是天一觀的道長寨典。 經常有香客問我,道長房匆,這世上最難降的妖魔是什么耸成? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮浴鸿,結果婚禮上井氢,老公的妹妹穿的比我還像新娘。我一直安慰自己岳链,他們只是感情好花竞,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著掸哑,像睡著了一般约急。 火紅的嫁衣襯著肌膚如雪零远。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天烤宙,我揣著相機與錄音遍烦,去河邊找鬼。 笑死躺枕,一個胖子當著我的面吹牛服猪,可吹牛的內容都是我干的。 我是一名探鬼主播拐云,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼罢猪,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了叉瘩?” 一聲冷哼從身側響起膳帕,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎薇缅,沒想到半個月后危彩,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡泳桦,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年汤徽,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片灸撰。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡谒府,死狀恐怖,靈堂內的尸體忽然破棺而出浮毯,到底是詐尸還是另有隱情完疫,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布债蓝,位于F島的核電站壳鹤,受9級特大地震影響,放射性物質發(fā)生泄漏惦蚊。R本人自食惡果不足惜器虾,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蹦锋。 院中可真熱鬧兆沙,春花似錦、人聲如沸莉掂。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至库正,卻和暖如春曲楚,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背褥符。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工龙誊, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人喷楣。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓趟大,卻偏偏與公主長得像,于是被迫代替她去往敵國和親铣焊。 傳聞我的和親對象是個殘疾皇子逊朽,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361