vue3中解决loop模式图片较少时的报错问题以及与effect为coverflow时的冲突问题

1.下载swiper

npm i swiper

2.定义swiper,数量为3的情况下，loop为true的情况下

<template>
    <div>
        <swiper
            effect="coverflow"
            :centeredSlides="true"
            :grabCusor="true"
            :slidesPerView="3"
            :coverflowEffect="{
                rotate:50,
                stretch:0,
                depth:200,
                modifier:1,
                slideShadows:false
            }"
            :navigation="true"
            :pagination="{clickable:true}"
            :modules="modules"
            class="mySwiper"
            :space-between="120"
            :loop="true"
            ref="swiperRef"
        >
            <swiper-slide v-for="(item,key) in srcList" :key="key">
                <img :src="item" alt="" class="swiperimg">
            </swiper-slide>
        </swiper>
    </div>
</template>
<script setup>
import {ref,reactive} from 'vue';
import {Swiper,SwiperSlide} from 'swiper/vue';
import {Pagination,EffectCoverflow,Navigation} from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import 'swiper/css/effect-coverflow';
const modules = [Pagination,EffectCoverflow,Navigation]
const srcList = ref([
    require('@/assets/ceshi/nature-1.jpg'),
    require('@/assets/ceshi/nature-2.jpg'),
    require('@/assets/ceshi/nature-9.jpg'),
])
</script>
<style scoped>
.swiper{
    width:calc(100% - 200px);
    margin: auto;
    padding-bottom: 50px;
}
.swiper-slide{
    width:500px ;
    background-position: center;
    background-size: cover;
}
.swiperimg{
    width: 100%;
    height: 500px;
}
</style>

效果如下

可以发现问题，索引默认为最后一个，并且还提示报错

这是因为loop模式下，图片数量必须要多于整屏图片数量的二倍，目前slidesPervView为3，说明至少需要6个图片（测试了一下5张图片也可以），但是我只需要3个图片

解决办法：在小于5张图片的情况下，复制一倍数量，编写自定义页码

代码如下：

<template>
    <div>
        <swiper
            effect="coverflow"
            :centeredSlides="true"
            :grabCusor="true"
            :slidesPerView="3"
            :coverflowEffect="{
                rotate:50,
                stretch:0,
                depth:200,
                modifier:1,
                slideShadows:false
            }"
            :navigation="true"
            :pagination="paginationOption"
            :modules="modules"
            class="mySwiper"
            :space-between="120"
            :loop="true"
            ref="swiperRef"
            @slide-change="onChangeSwiper"
        >
            <swiper-slide v-for="(item,key) in newSrcList" :key="key">
                <img :src="item" alt="" class="swiperimg">
            </swiper-slide>
            <div class="swiper-pagination"></div>
        </swiper>
    </div>
</template>
<script setup>
import {ref,reactive} from 'vue';
import {Swiper,SwiperSlide} from 'swiper/vue';
import {Pagination,EffectCoverflow,Navigation} from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import 'swiper/css/effect-coverflow';
const modules = [Pagination,EffectCoverflow,Navigation]
const srcList = ref([
    require('@/assets/ceshi/nature-1.jpg'),
    require('@/assets/ceshi/nature-2.jpg'),
    require('@/assets/ceshi/nature-9.jpg'),
])
const currentImgIndex = ref(0)
const paginationOption = reactive({
    el:'.swiper-pagination',
    clickable:true,
    type:'custom',
    renderCustom:function(swiper,current,total){
        let paginationHtml = ''
        for(let i=0;i<srcList.value.length;i++){
            let activeClass="swiper-pagination-bullet-active"
            //默认显示第一个
            if(i==0){
                paginationHtml+=`<span class="swiper-pagination-bullet ${activeClass}"></span>`
            }else{
                paginationHtml+=`<span class="swiper-pagination-bullet"></span>`

            }  
        }
         return paginationHtml
    }
})
const onChangeSwiper = (item)=>{
    currentImgIndex.value = item.realIndex%srcList.value.length

    //切换时给页码加active
    let paginationElChild = document.querySelector(".swiper-pagination").children
    if(paginationElChild[0]){
        for(let i=0;i<srcList.value.length;i++){
            if(i==currentImgIndex.value){
                paginationElChild[currentImgIndex.value].setAttribute('class','swiper-pagination-bullet swiper-pagination-bullet-active')
            }else{
                paginationElChild[i].setAttribute('class','swiper-pagination-bullet')
            }
        }
    }
}
// 复制一倍数组
let copyList = JSON.parse(JSON.stringify(srcList.value))
let newSrcList = [...copyList,...copyList]

</script>
<style scoped>
.swiper{
    width:calc(100% - 200px);
    margin: auto;
    padding-bottom: 50px;
}
.swiper-slide{
    width:500px ;
    background-position: center;
    background-size: cover;
}
.swiperimg{
    width: 100%;
    height: 500px;
}

:deep(.swiper-pagination-bullet){
    margin-right: 10px;
    cursor: pointer;
}
</style>

完美解决