Vue3使用Swiper实现列表内容分两行循环滚动

下载Swiper，我这里用的是8.1.1版本

//最新版
npm install swiper
//8.1.1版本
npm install [email protected]

Vue代码

<template>
<swiper :slides-per-view="2" :autoplay="{ delay: 3000, disableOnInteraction: false }" :speed="500" :direction="'vertical'" :scrollbar="{ draggable: false }" :loop="true" :modules="sayData.modules" class="swiperclass">
    <swiper-slide class="nr" v-for="(item, index) in sayData.list" :key="item.id">
        <div :title="item.warnMsg" class="flexAlign" style="height: 100%;">
            <span class="normal">{{item.createTime}} {{ item.warnMsg }}</span>
        </div>
    </swiper-slide>
</swiper>
</template>
<script setup>
    import { Swiper, SwiperSlide } from 'swiper/vue';
    import { Autoplay } from 'swiper';
    import 'swiper/css';
    const sayData = ref({
        list: [],
        modules: [Autoplay],
    });
</script>

<style>
    .swiperclass{
        height: 100px;
    }
    .nr{
        height: 50px!important;
        margin-bottom: 0!important;
        cursor: pointer;
    }
</style>

:slides-per-view="2"

• 含义：设置每页显示的滑块数量。
• 作用：在这个例子中，每页会显示 2 个滑块（例如图片或卡片）。

2. :autoplay="{ delay: 3000, disableOnInteraction: false }"

• 含义：启用自动播放功能。

  • delay: 3000：自动切换到下一页的延迟时间，单位是毫秒。这里设置为 3000 毫秒（即 3 秒）。
  • disableOnInteraction: false：是否在用户交互（如滑动）后禁用自动播放。设置为 false 表示即使用户滑动后，自动播放仍然会继续。

3. :speed="500"

• 含义：滑动动画的速度。
• 作用：设置滑动动画的持续时间，单位是毫秒。这里设置为 500 毫秒，表示滑动动画会在 0.5 秒内完成。

4. :direction="'vertical'"

• 含义：滑动的方向。
• 作用 ：设置为 'vertical' 表示滑动方向是垂直的，即上下滑动。如果设置为 'horizontal'，则表示水平滑动。

5. :scrollbar="{ draggable: false }"

• 含义：配置滚动条的样式和行为。

  • draggable: false：是否允许用户通过拖动滚动条来切换滑块。设置为 false 表示用户不能通过拖动滚动条来切换，滚动条仅用于显示当前的滑动位置。

6. :loop="true"

• 含义：是否启用循环模式。
• 作用 ：设置为 true 表示滑动到最后一张后会自动跳转到第一张，形成一个循环。如果设置为 false，则滑动到最后一张后无法继续滑动。

7. :modules="sayData.modules"

• 含义：引入 Swiper 的模块。
• 作用 ：sayData.modules 是一个数组，包含了需要使用的 Swiper 模块。Swiper 通过模块化设计，允许按需加载功能模块，以减少代码体积。例如，如果需要使用自动播放功能，就需要引入 Autoplay 模块。 slides-per-view：表示页面默认展示多少条数据

完