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

Posted 2023-04-02 芒果沙冰哟

最近有一个需求,上方是一个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);

    ,

  ,

;

在Vue中使用了Swiper ，动态从后台获取数据的之后，swiper滑动失效？？

在Vue中使用了Swiper ，动态从后台获取数据的之后，swiper滑动失效？？

是因为swiper提前初始化了，那时候数据还没有完全出来。这里有两种解决办法

1. 使用vue提供的$nextTick()方法

当Vue构造器里的data值被修改完成后会调用这个方法，也相当于一个钩子函数吧，和构造器里的updated生命周期很像。

在数据初始化完毕之后，再初始化swiper就不会出现问题了

this.$nextTick(function () {

              var swiper = new Swiper(‘.swiper-container‘, {

        此处省略

         }）

            })

2.在swiper初始化的时候

swiper1 = new Swiper(‘.swiper-container‘, {

    initialSlide :0,

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

    observeParents:true//修改swiper的父元素时，自动初始化swiper

});