前端使用swiper的坑

1.动态渲染swiper左右切换按钮和滑动切换失效

原因：这是因为ajax是个异步请求，当页面渲染完毕时，swiper插件没法获取最新的swiper-slide个数，导致部分功能失效。

解决办法：

在swiper初始化时设置下面属性

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

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

例：

var mySwiper = new Swiper('.swiper-container', {
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
    observeParents: true, //修改swiper的父元素时，自动初始化swiper
    direction: 'horizontal', // 水平切换选项
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }
})

2. 初始化swiper时，设置loop:true 动态渲染数据之后，无法实现循环切换

原因同上

解决办法：    在ajax的成功回调函数里面初始化swiper，以防万一，可以写在一个定时器里初始化swiper。

例：

$.ajax({ url: "test.html", context: document.body, success: function(){
    setTimeout(function() {
      mySwiperFun()
    }, 50);  
}});

注：mySwiperFun为初始化swiper方法

3. 初始化swiper时，设置loop：true，使用vue写的部分点击事件失效

原因：因为swiper的无限轮播时会自动复制第一个和最后一个页面进行轮播。但由于只复制页面没有复制点击事件，此时我们用vue写的点击事件在页面循环一周回来遇到复制的页面时，点击事件就会失效。

解决办法：我在网上搜索一些方式是说在初始化时，定义click事件，然后进行点击事件的操作，但是他们都是那种基于整个swiper-slide的点击，考虑到现实情况有可能是一个swiper-slide需要有不同点击事件，或者需要同一个点击方法需要传递不同的参数。我使用了jquery的点击事件。

注意 ：$(".class").click(function(){});这种写法是无效的，

要用这种写法：$(document).on("click",".class",function(){});

如果是同个方法需要传递不同参数的需求，可以使用  data-参数  的方法实现

例：

<!-- html -->
<div class="swiper-container" style="overflow: hidden">
  <div class="swiper-wrapper">
    <div class="swiper-slide" v-show="arr.length > 0" v-for="(item,index) in arr" :key="index">
      <div class="item">
        <div class="top">
          <!-- 前者为动态传入参数，后者为固定传入参数 -->
          <p :data-id='item.id' data-type='6'>{{item.id}}</p>
        </div>
        <div class="bottom">
          <p :data-id='item.id' data-type='6'>{{item.id}}</p>
        </div>
      </div>
    </div>
  </div>      
</div>
<!-- js -->
<script>
  var arr = [{id:1}, {id:2}, {id:3}]
  $(document).on('click','.item p',function(e){
    // 获取传入参数
    var id = e.currentTarget.dataset.id
    var type = e.currentTarget.dataset.type
    // 调用方法
    consoleData(id,type)
  })
  function consoleData (id,type){
    console.log(id,type)
  }
</script>

// 这个代码片段不是完整的，引入文件和初始化swiper请自行补充完整

此外，我还发现一个问题，swiper的每个版本变化都挺大的，比如你写好的一个轮播样式，换一个版本的swiper.js 可能样式就变了。
所以慎重切换不同版本的swiper。