1.Swiper介绍

1.1 简介

Swiper是一款简单，多功能的轮播组件，由于功能强大，所以个人很喜欢使用这个插件。以前都是用3.0版本，开发新项目的时候看了一下已经更新到第5个版本了，这里先上一波文档吧：www.swiper.com.cn/

1.2 Vue使用

emmm直接上代码

npm install swiper

直接在.vue文件使用

<template>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div v-for="(item, index) in List" :key="index" class="swiper-slide">{{item.content}}</div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</template>

<script>
//引入swiper
import Swiper from "swiper"
import 'swiper/css/swiper.min.css';

export default {
  name:"swiper",
  data(){
    return {
        List: [
        {id : 1, content: Swiper1 },
        {id : 2, content: Swiper2 },
        {id : 3, content: Swiper3 }
        ],
        this.swiper: null
    }
  },
  computed:{},
  methods:{
      initSwiper (){
            if (this.swiper != null) return;
            //初始化方法，此处为5.0版本写法，各个版本的参数写法可能有出入，具体请看官方文档
            this.mySwiper = new Swiper('.swiper-container', {
                autoplay: true,
                loop : true
            })
      }
  },
  mounted(){
    this.initSwiper();
  },
}
</script>

到此一个简单的轮播图组件就搞定了，不用自己造轮子是真的舒服。

2.正片（踩坑）开始

虽然到此一个简单的轮播插件就完成了，各种循环轮播或者touch事件参数也可以通过查看文档找到。但是一般我们的的List数组都不是静态写死的，通常是通过axios传输，当你传输完成可能会出现以下某种情况（列出来的都是我遇到的😳）：

1.轮播图无法拖动    
2.轮播的loop失效
3.数据不匹配

或者其他乱七八糟的问题，解决的办法就是在传输完成的时候重新update一下mySwiper，在查询了文档之后心满意足的写下以下代码：

axios.post(****).then(res => {
    //省略
    
    this.$nextTick(() => {
        this.mySwiper.autoplay.start(); //自动播放
        this.mySwiper.updateSlides(); //更新slide
        this.mySwiper.update();
        console.log(this.mySwiper)
    })
})

加上以上代码之后可以拖动，并且也会自动播放了，但是循环轮播loop失效了，继续查阅文档的途中发现其实写了这么多代码，但是Swiper有提供了一个observer参数，这个参数是检测slide发生变化时会自动更新组件。而我们的loop失效则需要在autoplay添加一个disableOnInteraction参数，修改完代码如下：

axios.post(****).then(res => {
    //省略
    this.$nextTick(() => {
        this.initSwiper()
    })
})

initSwiper (){
        if (this.swiper != null) return;
        //此处为5.0版本写法，各个版本的参数写法可能有出入，具体请看官方文档
        this.mySwiper = new Swiper('.swiper-container', {
            loop : true,
    +        autoplay: {
    +            disableOnInteraction: false,
    +       },
    +        observer:true,
        })
  }

这样编写完你的轮播组件就可以正常运行了，还有其他乱七八糟的问题其实在文档中也是可以找到一些解决的思路的，这里建议你们在使用的时候可以直接console.log出你们的Swiper实例，毕竟文档随全，但是参数真的太多了，直接看实例反而更容易找到你想要的方法或者参数。