vue輪播組件swiper

每次項目使用輪播的時候都是直接用swiper，實話實說，功能強大，簡單。可是想一想本身每次都使用最基本的，因而就本身搗鼓了一個。

先說一下無縫滾動原理吧：

本來是在想有沒有什麼好辦法能夠不復制節點，後來寫了一些動畫發現沒辦法作到，因而也是採用了複製先後節點的方法。如上圖，在第一個複製一個最後一個的節點，最後一個加上第一個的節點。當滾動到最後一個的時候，繼續往下滾動到複製的節點，而後在下一次滾動以前判斷，若是是最後一個立馬無動畫滾動到初始化位置。向右的時候也是同樣的原理。

這邊也說一下動畫問題，原本使用定時器去移動，後來有個網友推薦使用的是transition，確實很美麗，樣式只要有改變都會是緩慢的，而後移動使用的是絕對定位position，而後使用transform的translate3d，移動的是一整個塊，而不是單個的元素。

移動的距離原本使用的是元素style.left，後面發現屢次點擊會有很大偏差，因而採用index去計算元素的寬度而後移動。附上動畫方法：

moveAnimate(el){

let startX = -this.currentIndex * el.offsetWidth;

let endX = startX - el.offsetWidth;

el.style.transform = translate3d(${endX}px, 0px, 0px);

el.style.transition = ${this.wSwiperOptions.speed}s;

},

須要注意一下，爲了無縫滾動，在無感知恢復原來位置的時候，須要設置transition的時間爲0：

judgeCurrent(el){

if(this.currentIndex == el.children.length - 2){

this.currentIndex = 0;

el.style.transform = translate3d(-${el.offsetWidth}px, 0px, 0px);

el.style.transition = '0s';

}else if(this.currentIndex == -1){

this.currentIndex = el.children.length - 3;

el.style.transform = translate3d(-${el.offsetWidth * (this.currentIndex + 1)}px, 0px, 0px);

el.style.transition = '0s';

};

}

若是是元素最後一個(已經複製了節點)，就初始化到總體向左移動一格的位置，無感知無動畫。若是是第一個，初始化到倒數第二個，這邊會有-1的場景是左右點擊按鈕，右邊按鈕點一下index是減1的。

自動輪播方法：

autoPlay(el){

if(!this.wSwiperOptions.autoPlay){

return

}

this.intervalId = setInterval(() => {

this.judgeCurrent(el);

this.currentIndex++;

this.moveAnimate(el);

this.pagingParallelism(el);

}, this.wSwiperOptions.time);

}

預留一個參數是否要自動輪播，每次輪播後index須要加1，而後執行動畫，而且分頁圓點要跟隨。

不少方法操做會先清除定時器，而後再從新輪播，不然會有衝突，由於定時器還未執行的時候清除就不會執行。

分頁圓點也須要一些判斷：

pagingParallelism(el){

let len = el.children.length;

if(this.currentIndex == -1 || this.currentIndex == len - 3){

this.pageIndex = len - 3;

}else if(this.currentIndex == len - 2){

this.pageIndex = 0;

}else{

this.pageIndex = this.currentIndex;

}

}

pageIndex 是控制選中狀態用的。

必須得說一下左右按鈕，沒有默認箭頭，爲了可讓別人本身定義(實際上是懶得弄一套icon到項目裏)。而後採用的是監聽綁定的方法。

最簡單的左右箭頭，分頁圓點和輪播有了，最後加上了幾個移動端touch的幾個小點，和鼠標hover的功能。比較遺憾的是還沒寫移動端touch過程輪播隨着移動距離移動。代碼很簡單，能夠自行擴展。

其實說再多仍是不如本身下載下來看一下代碼，仍是但願能夠下載下來看看代碼，使用一下，之後簡單的輪播組件就用本身的，固然，兼容性是比不上那些第三方組件庫的，可是本身的爲所欲爲的可擴展。

已經發布npm，不得不說一下，一開始發佈版本號沒改，發不上去，改了以後不知道是否是由於以前沒改報錯的緣由，一直報錯400，花了不少時間查找爲何，後來改了版本號再發布就行了，地址：

www.npmjs.com/package/wad…

或者直接下載：npm install wade-ui

最後祝你們國慶嗨皮！！！