Correct usage posture of vue + swiper (with plug-and-play css, dynamic update data, usage suggestions)

---

1. Demonstration effect

Let's take a look at the results first, showing the commonly used picture scrolling color, and the plug-in response and new effect after dynamically changing the data

---

2. Tucao

I have never seen such a difficult to use plugin! In the case of using Vue, I just want to achieve the effect of simple image scrolling + data change plug-in response update, but I have been tossing for a day!

---

3. Suggestions for use

1. It is not recommended to use the latest version (6.x), because the official documentation is not detailed. According to the official instruction "Using swiper in Vue", after 2 hours of tossing, such a simple effect cannot be achieved;
建议使用3.x，因为网上大部分教程都是使用这个版本，遇到坑也好解决。

2. It is not recommended to use the swiper component (that is <swiper></swiper>), because the swiper version and the swiper component version are different, and there is a situation where "you think you are using the 4.x version, but you are actually using the 3.x version", which leads to invalid api . And I have measured that the swiper component cannot handle data changes.
建议使原始的 new Swiper()的方式

---

4. Formal use

1. Specify to install swiper3 version

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

2. Detailed code (see comments for details)

<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>