vue-awesome-swiper异步加载数据,初始化的loop不生效——解决及猜想

情景介绍

vue+typescript+vue-awesome-swiper项目,首页轮播使用vue-awesome-swiper,banner数据从服务器端加载。
数据加载需要时间,如果直接载入vue-awesome-swiper,结果是swiperOption配置的loop: true不生效:

swiperOption: {
    loop: true,
}

猜想

猜测原因就是初始化的时候没有足够的元素swiper-slide,所以没有执行复制元素的操作,就没有loop
为了验证这个猜测,做了一下几个尝试:

  1. 初始化banner长度为1,服务器返回的长度为4,运行。

    结果是loop依然没有生效。
    ?loop没响应或者缺少监听器observer

  2. 加入observer: true属性进行监听,再运行。
    依然不生效。
    ?observer不生效
  3. 浏览器控制台执行元素删除操作。

    滑块的页脚同时变化
    !observer生效——loop不响应

结论

loop属性不是响应式的,数据变动之后不会自动初始化整个滑块

解决

开始的时候,想的办法是初始化设置init: false,获取数据之后再执行init(),可以解决该问题。
后来看了一篇文章,可以对数据长度做一个判断:

<swiper v-if="banner.length > 0" :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">

增加这个判断之后,loop的问题解决了。
原因是只有banner.length > 0的时候,才会挂载swiper,只有挂在之后才会执行初始化的init操作,所以可以确保loop执行的时候,滑块元素swiper-slide是存在且完整的,完美解决!

结语

解决bug的友情链接

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值