vue + swiper 的正确使用姿势（附即插即用css、动态更新数据，使用建议）

---

一、演示效果

先看看成果，展示了常用的图片滚动样色，以及动态变更数据后插件响应跟新的效果

---

二、吐槽

从来没见过这么难用的插件！在结合vue使用情况下，我就想实现简单的图片滚动 + 数据变更插件响应更新 的效果，然而折腾了一天！

---

三、使用建议

1、不建议使用最新版本（6.x），因为官方的使用文档不详细，照着官方的使用说明“在vue中使用swiper”，折腾了2小时，却不能实现这么简单效果；
建议使用3.x，因为网上大部分教程都是使用这个版本，遇到坑也好解决。

2、不建议使用swiper组件（就是），因为swiper版本和swiper组件版本是不同的，存在“你以为使用了4.x的版本，而实际使用的是3.x版本”从而导致api无效的情况。而且我实测，swiper组件并不能处理数据变更的情况。
建议使原始的 new Swiper()的方式

---

四、正式使用

1、指定安装swiper3版本

npm install vue-awesome-swiper@3 --save-dev

2、详细代码（具体请看注释）

<template>
    <section class="swiper">
       
       <div class="swiper-container">
           <div class="swiper-wrapper">
               <div
                   class="swiper-slide"
                   v-for="item in pics"
                   :style="`background-image: url(\/${item.picUrl})`"
               >div>
           div>
           <div class="swiper-button-prev" slot="button-prev">
               <i class="el-icon-arrow-left">i>
           div>
           <div class="swiper-button-next" slot="button-next">
               <i class="el-icon-arrow-right">i>
           div>
       div>
       
       <div class="swiper-pagination">div>
    section>
template>
<script>
//引入插件
import Swiper from 'swiper'; 
import "swiper/dist/css/swiper.css";

export default {
  data() {
    return {
      pics: [],
    };
  },
  created() {
    //swiper设置
    this.swiperOption = {
      loop: true,
      slidesPerView: 3,
      paginationClickable: true,
      spaceBetween: 10,
       //自动播放，按需选择
       // autoplay: {
       //   delay: 3000,
       // },
       
       // 自定义分页（因为分页在slider外面）
       pagination: {
       		el: ".swiper-pagination",
          	clickable: true,
            paginationBulletRender: function (swiper, index, className) {
              return '+ className + '">' + (index + 1) + '';
            }
      	},
      // 设置点击箭头
      navigation: {
        clickable: true,
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
    }
  },
  mounted() {
  	this.queryList();
  },
  methods: {
    //request查询后端数据
    queryList() {
      //ajax获取数据后，并且页面元素更新后this.$nextTick 进行更新swiper
      ajax(data).then((res) => {
		.......
        this.$nextTick(() => {
          //如果已存在swiper则更新插件，否则新建插件
          if (this.swiper) {
            this.swiper.loopDestroy(); //销毁循环分页
            this.swiper.loopCreate(); //创建循环分页
            this.swiper.update(); //更新样色
          } else {
            this.swiper = new Swiper(".swiper-container",this.swiperOption)
          }
        })
      });
    },
  }
}
script>


<style lang="scss" scoped>
.swiper ::v-deep .swiper-pagination-bullet {
    border-radius: 0;
    outline: none;
    margin: 0 3px;
    width: 15px;
    height: 3px;
    vertical-align: top;
}
.swiper-container {
    position: relative;
    height: 220px;
    width: 100%;
}
.swiper-container .swiper-slide {
    color: #000;
    font-size: 16px;
    text-align: center;
    line-height: 220px;
}
.swiper-pagination {
    text-align: center;
    width: 100%;
    position: relative;
    height: 3px;
    overflow: hidden;
    margin-top: 20px;
}

.swiper-button-prev,
.swiper-button-next {
    width: 35px;
    height: 35px;
    border-radius: 100%;
    background-size: 10px;
    color: #fff;
    text-align: center;
    line-height: 35px;
    background: rgba($color: #000, $alpha: 0.1);

    &:hover {
        background: rgba($color: #000, $alpha: 0.3);
    }
}

.swiper-slide {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #eee;
}
style>