swiper的使用（loop失效问题，数据请求后的展示问题）

swiper的使用

1.下载5版本的

cnpm i --save swiper@5

2.引入

（1）在main.js中引入css

import "swiper/css/swiper.css"

（2）在要使用的页面中引入swiper

import Swiper from "swiper"

3.使用

在要使用的页面中。
（1）html

<div class="swiper-container" id="mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide" v-for="(item,index) in footerImgArr" :key="index">
      <img :src="item.imgUrl" alt="">
    </div>
  </div>
</div>

（2）js

data(){
    return {
      footerImgArr: [
        {imgUrl: require("../../ets-ui/img/detailsImage.png")},
        {imgUrl: require("../../ets-ui/img/f_ectry.png")},
        {imgUrl: require("../../ets-ui/img/newsImage.png")},
        {imgUrl: require("../../ets-ui/img/s_ectry.png")},
        {imgUrl: require("../../ets-ui/img/th_ectry.png")},
      ]
    }
},
created(){
    this.mySwiper()
},
methods: {
    mySwiper() {
      this.$nextTick(()=>{
        let swiper = new Swiper('.swiper-container',{
          autoplay:true, //自动播放
          direction: 'horizontal', //水平播放
          loop: true,//开启循环模式
          slidesPerView: 4, //一页要显示的slide个数
          spaceBetween: 10 //slide间隔
        })
      })
    },
}

4.通过请求数据的使用

这里的设置会出现问题：
（1）loop的失效
（2）在一个box中展示多个img出现错误
解决：将方法mySwiper的执行放在该轮播图的数据请求之后，通过$nextTick来执行，并给swiper添加以下配置

loopFillGroupWithBlank: true, //在loop 模式下，将用空白slide 填充slide 数量不足的组{loop和loopFillGroupWithBlank是一个组合}
observer:true,//修改swiper自己或子元素时，自动初始化swiper 
observeParents:true//修改swiper的父元素时，自动初始化swiper 

<div class="swiper-container" id="mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide" v-for="(item,index) in vipList" :key="index">
      <img :src="item.fileUrl" alt="">
    </div>
  </div>
  vipList: []
  created(){
        this.init();
  }
  methods: {
        init() {
               this.getVipList('1565147596105265154', 20)     
        },
        mySwiper() {
          this.$nextTick(()=>{
            let swiper = new Swiper('.swiper-container',{
              autoplay:true,
              direction: 'horizontal',
              loop: true,
              slidesPerView: 4,
              spaceBetween: 10,
              loopFillGroupWithBlank: true, //在loop 模式下，将用空白slide 填充slide 数量不足的组{loop和loopFillGroupWithBlank是一个组合}
              observer:true,//修改swiper自己或子元素时，自动初始化swiper 
              observeParents:true//修改swiper的父元素时，自动初始化swiper 
            })
          })
        },
        getVipList(newsSiteitemId, limit) {
          this.natureActive = newsSiteitemId;
          //根据栏目查询新闻
          var dataForm = {
            newsSiteitemId: newsSiteitemId,
            page: 1,
            limit: limit,
          };
          this.$http
            .get("noAuth/etsweb/web/vetsnews/page", { params: dataForm })
            .then(({ data: res }) => {
              if (res.code == 0) {
                this.vipList = res.data.list;
                this.$nextTick(()=>{
                  this.mySwiper()
                })
              }
            })
            .catch(() => { });
        },
  }