vue元件學習之路之輪播圖實現
摘要：
預覽地址
圖片的輪播
假設需要輪播三張圖片(1,2,3)，以前的思路就如圖所示，新增兩個節點。通過索引(index)的切換實現元件的無縫輪播。
這種想法的確可行，而且實現出來效果還不錯。
缺點在於
大量的dom操作。
程式...
圖片的輪播
假設需要輪播三張圖片(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 改為陣列而已，固定只出現兩個或三個圖片。目前還沒去做這個功能(好多元件還沒寫)。後面會更新。