1.问题描述

使用swiper，slides-per-view 设置为10,页面上要展示10条数据
我使用的Swiper版本时是8.4.5的版本

  <swiper
    :slides-per-view="10"
    :space-between="10"
    :speed="1000"
    :loop="true"
    :autoplay="{
      delay: 0,
      disableOnInteraction: true
    }"
    :modules="modules"
    direction="vertical">
    <swiper-slide v-for="(record, index) in props.swiperData" :key="index">
      ... 需要展示的代码
    </swiper-slide>
  </swiper>

image.png

2.分析

如图，当时数据有2条，
当数据小于我们配置的展示10条数据，因此loop 会自动复制数据填充。 如果有10条数据，在轮播时，会不断的复制最后几条数据，达到无限loop的效果
知道了loop的原理，对于多余的数据，我们就有解决方案了

3.解决方案

我们可以根据后端返回数据的长度去做判断，如果小于10，则不进行loop，否则进行loop

:loop="props.swiperData.length >10 "
 // 或者使用计算属性
 const isLoop = computed(() => props.swiperData.length >= 10)
 :loop="isLoop"

可能存在得问题
使用以上方法，可能会出现isLoop为true但是swiper不复制得问题，这是因为swiper初始化时，loop计算为false，后面通过计算属性计算后，isLoop为true,swiper未更新loop得状态，这是swiper得一个bug
方案
目前采用得方案是 通过v-if 得方式

<swiper v-if="swiperData.length">
  </swiper>

如果有更好的方式，欢迎在评论区留言