paginationClickable: true, slidesPerView: 3,

最新推荐文章于 2023-08-04 10:17:20 发布

Marktubbu

最新推荐文章于 2023-08-04 10:17:20 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue+swiper

本文链接：https://blog.youkuaiyun.com/Sensation_cyq/article/details/89669785

vue+swiper 专栏收录该内容

2 篇文章

订阅专栏

本文介绍在Vue(2.5.x)中使用Swiper(4.3.3)实现循环轮播的正确方法。通过在$nextTick中初始化Swiper，确保v-for循环渲染完成后才进行初始化，避免错乱。文章详细解释了如何设置autoplay、loop、observer和observeParents等参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

长话短说，在vue(2.5.x)中使用swiper(4.3.3)，轮播加了autoplay和loop、observer、observeParents等参数还是很诡异的无法循环轮播；

那么可以这样写代码试试：

    this.$api.queryImages().then((resp) => {
       if(resp && resp.data.resultCode == "0"){
         this.swiperImgs = resp.data.data;
         this.$nextTick(() => { // 下一个UI帧再初始化swiper
           this.initSwiper();
         });
        }
    })

是的，关键就在于上面这个初始化swiper的调用了，一般会用v-for循环渲染，然后马上初始化swiper，但是这样可能导致初始化时v-for还没渲染完毕，所以可能swiper错乱，那么swiper放在$nextTick下一个UI帧再初始化，保证了v-for已经完成循环。

    initSwiper() {
            if (this.swiper != null) return;
            this.swiper = new Swiper('.swiper-container', {
              loop: true,
              speed: 900,
              autoplay: {
                delay: 3000, //3秒切换一次
                disableOnInteraction: false
              },
              observer: true,//修改swiper自己或子元素时，自动初始化swiper
              observeParents: true,//修改swiper的父元素时，自动初始化swiper

              pagination: {
                el: '.swiper-pagination',
                // dynamicBullets: true,
              }
            });
          }