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

最后祝你们国庆嗨皮！！！