在vue中的使用Swiper,loop=true获取真实index,数据更新刷新初始化swiper

1.安装

npm install swiper --save-dev

2.在组件中引用

import Swiper from "swiper"
import 'swiper/dist/css/swiper.css';

3.初始化swiper

new Swiper('.swiper-container', { 
    pagination: '.swiper-pagination',
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: 'auto',
    loop:true,
    initialSlide : _this.activeIndex, 
    observer:true,//修改swiper自己或子元素时，自动初始化swiper
    observeParents:true,//修改swiper的父元素时，自动初始化swiper
    coverflow: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows : true
    },
    on: {
        slideChangeTransitionEnd: function(){
            console.log(this.realIndex)
            _this.activeIndex = this.realIndex;
        },
    }
});

 

（1）loop=true 时，轮询播放，activeIndex获取不到真实的索引，应该使用realIndex获取。

（2）当数据更新时，更新swiper需要一些设置即可

initialSlide : 0, 
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper

（3）因为数据是动态获取的，在数据请求之后再初始化swiper，这需要使用setTimeout做一下延迟

setTimeout(() => {
  new Swiper('.swiper-container', { 
    pagination: '.swiper-pagination',
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: 'auto',
    loop:true,
    initialSlide : _this.activeIndex, 
    observer:true,//修改swiper自己或子元素时，自动初始化swiper
    observeParents:true,//修改swiper的父元素时，自动初始化swiper
    coverflow: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows : true
    },
    on: {
        slideChangeTransitionEnd: function(){
            console.log(this.realIndex)
            _this.activeIndex = this.realIndex;    // 获取真实的下标 index
        },
    }
 
  });
},200)