vue元件之路之輪播圖的實現

火貓裸輝耀發表於2019-03-21
Vue元件

預覽地址

圖片的輪播

vue元件之路之輪播圖的實現

假設需要輪播三張圖片(1,2,3)，以前的思路就如圖所示，新增兩個節點。通過索引(index)的切換實現元件的無縫輪播。

vue元件之路之輪播圖的實現
vue元件之路之輪播圖的實現

這種想法的確可行，而且實現出來效果還不錯。 缺點在於

  • 大量的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(){
           //被選中的那個可以顯示了，其他的關閉
       }
   }
複製程式碼

vue元件之路之輪播圖的實現

也就是說 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改為陣列而已，固定只出現兩個或三個圖片。目前還沒去做這個功能(好多元件還沒寫)。後面會更新。

相關文章