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)
                    }
                }
            })