vue+swiper

这里记录下使用swiper踩过的坑~

在vue 中使用swiper,由于需要兼容稍微老一点的版本，（如火狐47）

最后通过各种尝试（安装了swiper4/5的版本，火狐47的不支持），最后选择了swiper3

做了这样的效果，下面是配置

//这里的swiperThree是为了区分，因为页面上用了多个swiper，这里是动态取到的值
<div class="swiper-container swiperThree">
   <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(row,rIndex) in list" :key="rIndex">
          <el-image :src="row.image" @click="handleToViewImage(row.image)"></el-image>
      </div>
   </div>
</div>


<script>
export default {
  data () {
    return {
      list: {}
    }
  },
  mounted () {
    this.instantSwiper()
  },
  methods: {
    instantSwiper() {
      this.mySwiper3 = new Swiper('.swiperThree', {
        autoplay: 2000, //自动播放
        slidesPerView: 4, //slide的个数
        spaceBetween: 20,//各个slide的间距
        loop: true,//循环播放
        observer: true,
        observerParents: true,
        autoplayDisableOnInteraction: false, //点击后继续播放
        prevButton: '.swiperThree-button .swiper-button-prev',
        nextButton: '.swiperThree-button .swiper-button-next'
      })
    }
  }
}
</script>

页面上的效果是循环有问题，第一张图片只有第一次出来，循环的时候，第一张图片一闪而过，查了好久，有人说放在$nextTick中，然而试了还是不行，没有找到解决的方案，最后只能用静态的数据试了一下，是没有问题的，那就说明，还是出在了动态获取数据的问题上，也就是说，当你循环的时候，数据有可能还没有拿到，这样就会导致循环错乱，最后的配置如下

this.$api.PostList(url, params).then(res => {
  this.list = res.list
  //这里获取到值之后
  this.$nextTick(()=> {
    setTimeout(() => {
      this.instantSwiper()
    },800)
  })
})

终于，问题解决了