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

---

一、演示效果

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

---

二、吐槽

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

---

三、使用建议

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

2、不建议使用swiper组件（就是<swiper></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方式，不使用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 '<span class="' + className + '">' + (index + 1) + '</span>';
            }
      	},
      // 设置点击箭头
      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>

<!-- 针对本示例的css -->
<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>