paginationClickable: true, slidesPerView: 3,

长话短说,在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,
              }
            });
          }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值