2020-03-13

Swiper简介

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

1、Swiper初始化

swiper的使用非常简单，能够快速实现轮播、滚动等效果。首先需要引入对应的css、js文件，现在最新Swiper初始化5.0，继承了非常多的功能。
通过new Swiper()初始化一个Swiper，返回初始化后的Swiper实例。

外层.swiperContainer是Swiper容器的css选择器，是不可少的。swiper-slide是每个项。

  

    
slider1
    
slider2
    
slider3
  

上面就是一个简单的左右滑动效果示例。
Tips：开启loop循环滚动后，会通过js动态创建两个重要的class类，.swiper-slide-prev,.swiper-slide-next,是当前激活swiper-slide-active的上一个和下一个元素，也是通过这三个类的控制，来实现banner切换的。

2、Swiper触发条件常用参数

1、allowTouchMove
允许触摸滑动。设为false时，slide无法滑动，只能使用扩展API函数例如slideNext() 或slidePrev()或slideTo()等改变slides滑动。
比如我们在PC时，要通过点击事件实现banner滑动效果，移动端通过滑动，就要通过该属性来控制
2、followFinger
跟随手指。如设置为false，手指滑动时slide不会动，当你释放时slide才会切换。
3、touchAngle
允许触发拖动的角度值。默认45度，即使触摸方向不是完全水平也能拖动slide。

image

4、touchEventsTarget设置接受touch事件的目标
5、autoplay
设置为true启动自动切换，并使用默认的切换设置，默认停留三秒。
6、effect
slide的切换效果，默认为"slide"（位移切换），可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
7、mousewheel、keyboard
可开启通过鼠标、键盘来控制Swiper切换。
8、Lazy Loading
延迟加载，图片延迟加载：需要将图片img标签的src改写成data-src，并且增加类名swiper-lazy。
还可以加一个预加载，

.

  

    
    



var mySwiper = new Swiper('.swiper-container', {
  lazy: {
    loadPrevNext: true,
    },
})

3、Swiper Touches事件函数

1、touchStart(event)、touchMove(event)、touchEnd(event)
类似于移动端touch事件，可监听事件进行操作。

2、slideChange、sliderMove
slideChange事件函数，在当前Slide切换到另一个Slide时执行(activeIndex发生改变)，一般是在点击控制组件、释放滑动的时间点。
sliderMove手指触碰Swiper并拖动slide的过程中不断触发sliderMove函数。接受touchmove事件作为参数。
3、click(event)
触发时机
如果没有触发touchMove()，则释放触摸/鼠标时：
(1).立即执行tap()
(2).如果触摸/鼠标按压时间小于300ms，并且两次触摸/点击间隔大于300ms，延迟300ms执行onClick
(3).如果触摸/鼠标按压时间小于300ms，并且两次触摸/点击间隔小于300ms，立即执行doubleTap

3、tap(event)
回调函数，当你轻触(tap)Swiper后执行。在移动端，click会有 200~300 ms延迟，所以请用tap代替click作为点击事件。
接受touchend事件作为参数。
4、resize当浏览器尺寸发生变化时执行
如：

var mySwiper = new Swiper('.swiper-container',{
  on: {
    resize: function(){
      //窗口变化了
    }, 
  },
})

4、总结

在实际的web开发中，总是需要兼容PC跟移动端，如果使用原生js自己写的话，不仅耗时，可能兼容性、稳定性也不好，特别是移动端的touch触控事件。使用swiper便不用考虑到兼容这些事，只要熟悉它的API，便可快速实现手机，电脑网页大部分滑动，焦点图、tab、触摸导航等功能
举个例子：
部分浏览器左右滑动翻页与页面中左右滑动监听冲突，导致我们要左右滑动效果无法实现。

$('.slideshowBox').each(function(index, el) {
    el.addEventListener('touchmove', function (event) {
        event.preventDefault();
    }, false);
});

slideshowBox是你需要手动滑动的父类，禁止当前区域的浏览器默认事件不会影响浏览器的左右滑动前进后退功能。

虽然swiper使用很方便，使得移动端效果更流畅完善，但是在具体开发中，有很多细节点反而更不好控制，且swiper默认有一些样式会对我们要的效果造成影响，比如.swiper-container{overflow:hidden;}，会使swipe选项卡被隐藏一部分。需要熟悉其文档，关于class类、事件等触发，才能灵活地控制实现效果。