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

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

npm 复制代码
//最新版
npm install swiper
//8.1.1版本
npm install swiper@8.1.1

Vue代码

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:表示页面默认展示多少条数据

相关推荐
钢铁男儿几秒前
C#接口实现详解:从理论到实践,掌握面向对象编程的核心技巧
java·前端·c#
前端的日常21 分钟前
以下代码,那一部分运行快
前端
GeGarron22 分钟前
Drawing:专注高效画图,让每一次创作都值得被珍藏
前端
梨子同志23 分钟前
Vue v-model 指令详解
前端·vue.js
杨进军23 分钟前
简易实现 React 页面初次渲染
前端·react.js·前端框架
血舞之境25 分钟前
同名类引发问题:没见过世面导致遇见各种诡异的问题
前端
杨进军25 分钟前
实现 React 多个原生标签子节点渲染
前端·react.js·前端框架
前端的日常26 分钟前
AI 工具中,经常提到的 mcp 是什么,有哪些与前端方向结合的场景?
前端
嘉小华26 分钟前
Android 协程全景式深度解析:第四章 Flow响应式流
android·前端
Tina_晴28 分钟前
【基础篇】Promise初体验+案例分析(上)
前端·javascript·面试