VUE swiper实现内容循环滚动

<template>
    <div class="dataListZone">
      <swiper id="swiperList2" v-if="data.list2" :slides-per-view="5"
        :autoplay="{ delay: 2000, disableOnInteraction: false }" :speed="500" :space-between="5" :direction="'vertical'"
        :scrollbar="{ draggable: false }" :loop="true" :modules="data.modules" style="height: 240px">
        <swiper-slide v-for="(item, index) in data.list2" :key="index">
          <li class="listItem type1">
            <a :title="item.title">{{ item.title }}</a>
          </li>
        </swiper-slide>
      </swiper>
    </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref, reactive } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper';
import 'swiper/css';
 
const { proxy } = getCurrentInstance();
 
const data = ref({
  list2: null,
  modules: [Autoplay],
});
 
onMounted(() => {
  getData();
});
 
function getData() {
  let jsonUrl = './data/data_2022_03.json?' + new Date().getTime();
  proxy.Axios.get(jsonUrl).then((res) => {
    data.value.list2 = res.data.leftBottomNJMK;
  });
}
 
</script>