三个swipperper-it实现日历无限滑动效果记录

通过设置swipper循环滚动实现向左滑动无限增加，向右滑动无限较少效果。
使用数组记录需要展示的数据，每次滑动后动态修改滑动方向下一个页面。

<template>
    <swiper class="swiper" circular :current="currentMonthIndex" @change="onSwiperChange">
        <swiper-item class="swiper-item" v-for="(month, index) in months" :key="index">
            <view class="calendar">
                <!-- 背景文字 -->
                {{ month.backgroundText }}
            </view>
        </swiper-item>
    </swiper>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
const currentMonthIndex = ref(1)
const months = reactive([{ backgroundText: 1 }, { backgroundText: 2 }, { backgroundText: 3 }])
// 切换月份
const onSwiperChange = (event: any) => {
    // 判断月份任务信息是否已经存在
    console.log(event.detail)
    // 增加
    if(swipDirection(currentMonthIndex.value,event.detail.current)==1){
        months[(event.detail.current+1)%3].backgroundText=
        months[event.detail.current].backgroundText+1
    }else{
        months[(event.detail.current-1+ 3)%3].backgroundText=
        months[event.detail.current].backgroundText-1
    }
    currentMonthIndex.value = event.detail.current;
};
function swipDirection(last: number, current: number) {
    if (last == 2 && current == 1) {
        return -1;
    }
    if (last == 2 && current == 0) {
        return 1;
    }
    if (last == 0 && current == 1) {
        return 1;
    }
    if (last == 0 && current == 2) {
        return -1;
    }
    if (last>current){
        return -1
    }else{
        return 1
    }
}

</script>

<style scoped lang="scss">
.swiper {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    .swiper-item {
        .calendar {
            width: 100vw;
            height: 100vw;
            position: relative;
            overflow: visible;
            background-color: rgba($color: #f5f5f5, $alpha: 0.5);

        }
    }
}
</style>