你不知道的vue+vue-awesome-swiper的坑~

前言：

这两天在写vue的一个练习，其中一个模块写了轮播图，说到轮播图，确定不少人会想到用 swiper插件，不错，vue中就有一个插件，叫vue-awesome-swiper，这个插件呢，我对他也不算陌生了，在这以前，我也用过两次了，因此此次用的时候我也就信心满满，但是结果简直让我心痛~bug不断，都让我怀疑人生了，解决bug以后我就在想，以前多是运气好吧，也就没有踩坑。如今我就将我本身踩的坑分享给你们，但愿你们避免入坑~（认真脸(#^.^#)）

介绍：

我这里呢对vue-awesome-swiper就不作过多的介绍了，想了解的宝宝能够直接去github上去搜，用法都有。这是github地址vue-awesome-swiper

如上图，点击进去以后，往下翻，找到readme，能够在里面看到用法~

坑~：

我遇到的第一个坑：

由于这个插件是swiper插件，因此我随手给这个组件就命名为Swiper了,而后在别的页面引入这个组件的时候，就会报错，以下：

当时我一脸懵X，浑然不知道发生了什么，又回去把readme看了几遍，发现本身用法没错呀。通过了若干个小时后。。。。。才解决了这个问题，我以为是个人这个组件的名字与这个插件的名字命名冲突了（我的想法），我。。。。。。之后不再敢用这个名字了~

我遇到的第二个坑：

页面正常渲染后，老是默认显示最后一张图片。一开始我也没有在乎，想着给图片换个位置就好了，别人又不知道真正的第一张实际应该展现什么，很快，我就被本身的这个愚蠢想法打脸了，由于图片下方的小圆点出卖了我，它也是在最后一个~个人代码如图：

后来我审查了元素，发现了其中的秘密。其实个人imgList里面只有五张图，可是由于这个轮播图是无缝滚动，因此在渲染的时候会复制最后一张图片放在第一张，复制第一张图片放在最后一张。

解决办法：咱们要经过v-if来进行判断，在请求到数据后再加载swiper

疑惑：可是我仍是想不通没有拿到数据就开始加载swiper怎么就是显示克隆的那个最后一张图片，拿到数据开始加载，克隆的最后一张的图片就不是最早显示的了，中间的前后顺序我仍是没有搞清楚，但愿有大神能指教一下。

总结：遇到问题不能随他而去，仔细想一想琢磨一下仍是会有收获的~