Swiper轮播图系列

一、初始化Swiper

new Swiper('.swiper-container', {
        initialSlide: 0,
        slidesPerView: 3,
        breakpoints: {
          750: {
            slidesPerView: 1
          },
          990: {
            slidesPerView: 2
          }
        },
        spaceBetween: 12,
        loop: true,
        speed: 1000,
        autoplay: {
          disableOnInteraction: false, // 手动滑动后，不停止自动轮播
          delay: 3000 //3秒切换一次
        },
        observer: true,
        observeParents: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          type: 'bullets'
        },
        paginationClickable: true,
        mousewheelControl: true,
        debugger: true
      });

二、Vue使用Swiper时，图片默认显示最后一张

2.1 问题

       Vue使用Swiper时，图片默认显示最后一张

2.2 分析

       需要动态加载数据，而官方推荐加载dom节点后再加载Swiper，在mounted钩子函数中初始化Swiper。我们数据在created使用ajax动态加载时，mounted完成调用，则swiper已经创建，而数据未加载完成，等数据加载完成时，swiper的页码没有再更新，所以显示的是最后一页的图片。

2.3 解决

1、通常的解决办法就是延迟加载，使用定时器：setTimeout(创建swiper方法名, 1000);

2、另一个相同思路的是直接使用v-show即可：v-show="list.length > 0"，写在class为swiper-container上面。（此方法并不能解决首尾无缝衔接问题，首尾无缝衔接还是得使用方法1）

三、手动点击或翻页后，不再自动轮播，自动轮播失效

3.1 解决

创建时设置属性：

        autoplay: {
          disableOnInteraction: false, // 手动滑动后，不停止自动轮播
          delay: 3000 //3秒切换一次
        },

四、循环轮播，循环到下一轮时，会反复重新加载图片

4.1 问题

       当loop设置为true时，循环到下一轮，再次出现的重复图片，会重新加载。

4.2 分析

       由于Swiper在轮播到首尾相接的位置时，由于HTML结构的变更（Swiper为了实现无缝轮播，会对首尾两张图片进行复制和调整），导致Vue认为图片发生了变更，从而重新渲染图片。

4.3 解决

       在使用for循环的时候，指定对应的key，使用key使用图片的src路径作为key，这样vue识别到相同的key，则不会再重复加载图片。

<swiper-slide
2  v-for="(image, index) in images"
3  :key="image.src"
4>
5  <img :src="image.src" alt="" />
6</swiper-slide>

五、在安卓上使用，设备息屏后重新亮起，导致轮播图卡死

5.1 问题

       安卓息屏后重新唤醒、或者当前页面失去焦点，展示了弹框，再关闭弹框回到当前页面，导致整个页面都卡死。

5.2 分析

       当前页面失去焦点后，轮播图仍然在运行，重新获得焦点时，大量遗留事件触发，导致页面卡死。

5.3 解决

       1、息屏/页面失去焦点时，触发事件，将轮播图暂停，亮屏/页面获得焦点时，触发事件，将轮播图恢复。（理论上如此，第二次息屏仍然存在问题）

       2、由于该安卓设备为定制设备，息屏后，会将后台进程全部暂停，只需在安卓端重新载入进程即可。