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的友情链接

    原文作者:陈其文
    原文地址: https://segmentfault.com/a/1190000018408112
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞