有关swiper动态改变数据遇到的坑（不能自动滚动，自动跟新数据，切换不正常）...

以前都觉得swiper的使用很简单，那是因为使用swiper时都是写的数据，按照官网上介绍直接初始化swiper，随便丢一个地方初始化就ok了，但是在很多需求中，我们都需要动态的改变数据，这样可能就会遇到很多问题

以下简单说说最近遇到的问题：
1、swiper不能自动切换（设置了autoplay）。

2、数据不匹配（需要加载的数据以改变，但是swiper里面的数据出现错误）。

3、数据匹配过后，永远切换不到第一条数据。

4、根本不能切换，手动拉也拉不动。

关于在vue项目中如何引用swiper插件步骤：

第一步 安装swiper： npm install [email protected] --save-dev

第二步 在用到此插件的组件中 引用组件

import Swiper from 'swiper';

import 'swiper/dist/css/swiper.min.css';

解决后的代码如下：

HTML代码
     

            

              
{{item.title}}
            
            
            

     

methods : {
    initSwiper(){
      setTimeout( () => {
        //轮播
        var mySwiper = new Swiper('.swiper-container', {
          autoplay:3000,//自动轮播
          peed:300,
          loop: true,  //开启轮播图前后循环模式
          slidesPerView:2, //轮播个数
          direction:'vertical', //方向 vertical、horizontal
          pagination:'.swiper-pagination',//如果需要分页器
          observer:true,//修改swiper自己或子元素时，自动初始化swiper
          observeParents:false,//修改swiper的父元素时，自动初始化swiper
          onSlideChangeEnd: function(swiper){
          　　　swiper.update();  
          　　　mySwiper.startAutoplay();
          　　   mySwiper.reLoop();  
          }
        })
      })
    },
mounted () {
      this.$nextTick(() => {
        this.initSwiper()
      })
  }
}

真正的核心部分在

observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:false,//修改swiper的父元素时，自动初始化swiper
onSlideChangeEnd: function(swiper){
　　 swiper.update();
　　 mySwiper.startAutoplay();
　　 mySwiper.reLoop();
}

加上这串代码后，使用基本正常

mySwiper.reLoop(); 重新对需要循环的slide个数进行计算，当你改变了slidesPerView参数时需要用到，需要自动轮播的时候必须要加上；

swiper.update(); 更新Swiper，这个方法包含了updateContainerSize，updateSlidesSize，updateProgress，updatePagination，updateClasses方法。也就是数据改变是重新初始化一次swiper；

mySwiper.startAutoplay(); 重新开始自动切换；