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

2024年2月2日 203次阅读 来源: 陈其文

情景介绍

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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞