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>
如果有更好的方式，欢迎在评论区留言
