swiper在vue中的使用 及 神坑

　　一、实例化和导入

import Swiper from 'swiper';

let viewSwiper;

let previewSwiper;

在外面声明全局变量，然后在初始化方法里面实例化swiper实例，该初始化方法在mounted里面调用。

二、坑s

　　1. 首先在vue里面初始化时数据肯定不是一成不变的，而是通过后台请求过来，或者父组件传入进来的，为了满足swiper能够动态监听数据，并刷新显示效果，需要添加上下面两个配置：

observer:true, //修改swiper自己或子元素时，自动初始化swiper

observeParents:true,//修改swiper的父元素时，自动初始化swiper

2. 当设置loop：true，可能会导致图片的点击事件的失效。原理是：swiper动态的渲染dom时，只是‘复制粘贴’，且并没有把dom中的监听事件给‘复制’进来，进而导致事件监听事件失效。

　 在网上搜了好多，说是用swiper实例化中的点击回调函数（如下）

　 但依旧监听不到这个回调，后来把实例化中的 allowTouchMove: false, 注释掉，发现竟然可以了，懵逼~

on:{
    click: function(e) {
       viewSwiper.slideTo(this.clickedIndex)
    }
}

3.第三个问题是初始化数据之后，显示的确实最后一个slider，搞不懂后来网上寻找了一种方案，用slideTo（swiper自带）动态的还原到第一个slider。

this.$nextTick(function() {
    this.initSowingImg();
    setTimeout(function(){previewSwiper.slideTo(0,0)},500); // 解决初始化进来后默认是最后一个slide的问题
});

4.第四个坑是，后来想在其父级组件中实例化多个swiper实例，也就是多个轮播图，发现并不能行，一直报错，然后果断弃坑自己写了个简单版的。

5.实例参数如下：loop 失效，loop不管是false，还是true，效果都是不能循环的，搞不懂~  有没有大神解答下

 previewSwiper = new Swiper('.preview .swiper-container', {
                slidesPerView: 'auto',
                loop: false,
                // allowTouchMove: false, 与回调冲突，设置true时，swiper点击回调经常失效。注释掉
                observer:true, //修改swiper自己或子元素时，自动初始化swiper
                observeParents:true,//修改swiper的父元素时，自动初始化swiper
                on:{
                    click: function(e) {
                        viewSwiper.slideTo(this.clickedIndex)
                    }
                }
            })