vue元件學習之路之輪播圖實現
圖片的輪播
假設需要輪播三張圖片(1,2,3),以前的思路就如圖所示,新增兩個節點。通過索引(index)的切換實現元件的無縫輪播。
這種想法的確可行,而且實現出來效果還不錯。
缺點在於
- 大量的dom操作。
- 程式碼邏輯相對挺複雜,量也更多。
- 重構或新增新功能會更麻煩
現在的思路
建立兩個元件分別為 carousel
和 carousel-item
結構如下
<x-carousel :selected.sync="selected"> <x-carousel-item name="1"> <div class="box"> 1</div> </x-carousel-item> <x-carousel-item name="2"> <div class="box">2</div> </x-carousel-item> <x-carousel-item name="3"> <div class="box">3</div> </x-carousel-item> </x-carousel>
selected
即為顯示的內容的 name
,用 sync
做一個"雙向繫結"。這樣子父元件就可以通過 updated
鉤子和 $children
來實時通知子元件,從而控制內容的展示。
updated(){ this.updateChildrens(this.selected) } methods:{ updateChildrens(){ //被選中的那個可以顯示了,其他的關閉 } }
也就是說 carousel
負責資料通訊,而 carousel-item
只需完成 動畫過渡 效果就行了,這樣邏輯就非常清晰了。
這裡當然就存在動畫正向與反向的問題,需要兩種方向不同的切入切出的動畫。
carousel
需要做一次判斷然後在 updateChildrens
的時候就告訴子元件方向。
進入方向的判斷
- 需要一個變數記錄上一次的
selected
數值,假設就為oldSelected
和newSelected
- 自動輪播是預設正向的(往後播放),到最後一個的時候回到第一個應該也是正向的
- 圓點(圖片索引圖示)選取切換,只需判斷兩次變數的大小就行
- 方向鍵切換(箭頭圖示),和自動輪播同理,方向應時刻和箭頭方向一致
解決跳過中間圖片的問題
不管輪播圖數量多少,這裡始終只在兩張圖裡面切換。這樣就涉及到一個問題就是會
跳過中間的圖片
首先 carousel-item
有一個預設的圖片過渡時間,這裡可以通過計算 oldSelected
和 newSelected
之間的差值來確定跳過圖片的數量。當然也有動畫方向的問題。
clickSelected(newSelected){ clearInterval(this.timer2) if(oldSelected===newSelected)return lastSelected = oldSelected // ............. this.‘控制時長的函式’(lastSelected,newSelected) }, '控制時長的函式'(lastSelected,newSelected){ //........ let newIndex = newSelected let animationDuration = '計時器的間隔時長' theIndex = ‘下一個展示的圖片索引’ //....... this.duration = duration this.'carousel元件'.forEach(vm=>vm.duration=duration) this.$emit('update:selected',names[theIndex])//通知一下父元件將要展示的下一個圖片的索引 if(theIndex===newIndex)return this.timer2 = setInterval(()=>{ if(theIndex===newIndex){ this.clearAndSet() } this.$emit('update:selected',names[theIndex]) oldIndex>newIndex?theIndex--:theIndex++ },duration*animationDuration) }
基本就能完成跳過中間圖片的這樣子的問題了,後面的 click
改為 hover
觸發功能就很簡單了。
最後是卡片化輪播的實現,這裡差不多就是把 selected
改為陣列而已,固定只出現兩個或三個圖片。目前還沒去做這個功能(好多元件還沒寫)。後面會更新。