偶遇vue-awesome-swiper的坑

最近用vue重构一个移动端的项目，碰到了很多坑，今天拿移动端最著名的轮播插件swiper为例来讲，因为这个项目没用UI库，纯手写的样式，沿用老的插件，天然而然的选择了vue-awesome-swiper(3.1.3)最新版，记不清上次用这个插件多久了，如今用来竟遇到不少坑，今晚闲暇以此记录，帮助你们避免踩坑。

1. 轮播图不轮播

这个缘由有不少，首先要检查样式swiper.css是否正确的引进来了，其次是最容易被忽略的也是此次最主要的缘由，最新版的vue-awesome-swiper是基于swiper4，有不少配置option已经变了，最为明显的就是原来的key-value格式autoplay: true,如今已经变成了下面这样的json格式：

autoplay:{
    enabled: true,
    disableOnInteraction: false,
    delay: 3000
},
pagination: {
    el: '.pagination'
}

下图为证：

官网上的图
配置好之后应该是能够轮播了，还有就是SPA若是不是多个轮播的话不必全局引这个，

 

import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
Vue.use(VueAwesomeSwiper);

只须要在封装好的轮播组件内引入如下这个就够了。

import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css'

2. 分页器pagination没出现

这个的话其一就是由于上面提到的配置option格式变了，其二是须要在pagination 的div盒子里增长slot="pagination"用来分发，这两个都没问题的话应该就OK了。

3. 轮播第二次开始后第一张图一闪而过

这个问题困扰了我很久，百度了好久也没找到有用的线索，今天早上去了公司内心想这个问题必须解决啊，要不体验也太差了，因此直接Google一下吧，第一个答案就是vue-awesome-swiper的GitHub上的issue，一看原来早已有人遇到了相似的问题，做者给出的解释是因为vue特殊的渲染机制致使数据没有彻底返回时swiper已经初始化了，如今解决的方法是加v-if=“data.length”,保证数据彻底返回了才开始渲染swiper，这样总算是解决了，体验立刻好极啦！以前因为英文很差因此通常有问题都是百度，最近发现同事有问题都是Google，今日一试果真是快准狠，之后要充分的利用好Google和StackOverFlow，提高效率不是一点半点哈！

4. resize()方法报错undefined

这个问题也是由于swiper4已经把resize变为一个object，它包含两个方法，我用了它的resizeHandler()方法，这样就OK了。

技术在不断进步，插件在不断更新，之后遇到问题必定要先看原文档，解决问题多借助Google！