swiper获取当前数组滑动的inex(vue)

最近有一个需求,上方是一个swiper,下方是商品数组,当滑动上方的swiper下方的列表需要跟着一起变化,这时候就需要获取当前滑动的swiper数组的index,再进行相关操作,实现方式如下:

import Swiper from "swiper";

import "swiper/dist/css/swiper.css";

import "swiper/dist/js/swiper.min";

export default {

data() {

return {

  merchantsZoneList: [],

  zoneId: "",

  currentSlide: 0,

};

},

created() {

//调用获取swiper list

this.getMoaZone();

},

methods: {

dataCarousel(data) {

  //此处需要改变一下this指向,因为此处的this是指向swiper

  let that = this;

  //初始化一个swiper

  this.mySwiper = new Swiper(".swiper-container", {

    //配置项

    loop: true,

    effect: "coverflow",

    spaceBetween: 20,

    grabCursor: true,

    centeredSlides: true,

    slidesPerView: "auto",

    initialSlide: 0,

    observer: true,

    observerParents: true,

    autoplay: 100,

    pagination: {

      el: ".swiper-pagination",

      clickable: true,

    },

    coverflowEffect: {

      rotate: 0,

      slideShadows: false,

    },

    on: {

      //滑动swiper使用的方法

      transitionEnd: function() {

        //当需要滑动的swiper选项等于当前的swiper选项,就不能调用方法

        if (this.activeIndex == that.currentSlide) {

          console.log("不能调用方法");

        } else {

          //只有相等才调用方法

          that.currentSlide = this.activeIndex;

          //获取当前swiper数组的index,data是从后台获取并传入的数组

          const index = (this.activeIndex + data.length) % data.length;

          //调用获取list方法数组

          that.zoneId = data[index].id;

          that.productList = [];

          that.pageNum = 0;

          that.getProductList();

        }

      },

    },

  });

},

async getZoneList() {

  //从获取swiper数组

  let res = await zoneList({});

  //获取swiper list赋值

  this.merchantsZoneList = res.data.ptZoneList;

  //使用异步方法调用swiper初始化并传入

  setTimeout(() => {

    this.dataCarousel(res.data.ptZoneList);

  }, 10);

},

},

};