1.問(wèn)題描述

使用swiper，slides-per-view 設(shè)置為10,頁(yè)面上要展示10條數(shù)據(jù)
我使用的Swiper版本時(shí)是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.分析

如圖，當(dāng)時(shí)數(shù)據(jù)有2條，
當(dāng)數(shù)據(jù)小于我們配置的展示10條數(shù)據(jù)，因此loop 會(huì)自動(dòng)復(fù)制數(shù)據(jù)填充。 如果有10條數(shù)據(jù)，在輪播時(shí)，會(huì)不斷的復(fù)制最后幾條數(shù)據(jù)，達(dá)到無(wú)限loop的效果
知道了loop的原理，對(duì)于多余的數(shù)據(jù)，我們就有解決方案了

3.解決方案

我們可以根據(jù)后端返回?cái)?shù)據(jù)的長(zhǎng)度去做判斷，如果小于10，則不進(jìn)行l(wèi)oop，否則進(jìn)行l(wèi)oop

:loop="props.swiperData.length >10 "
 // 或者使用計(jì)算屬性
 const isLoop = computed(() => props.swiperData.length >= 10)
 :loop="isLoop"

可能存在得問(wèn)題
使用以上方法，可能會(huì)出現(xiàn)isLoop為true但是swiper不復(fù)制得問(wèn)題，這是因?yàn)閟wiper初始化時(shí)，loop計(jì)算為false，后面通過(guò)計(jì)算屬性計(jì)算后，isLoop為true,swiper未更新loop得狀態(tài)，這是swiper得一個(gè)bug
方案
目前采用得方案是 通過(guò)v-if 得方式

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

如果有更好的方式，歡迎在評(píng)論區(qū)留言