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

相关推荐
liliangcsdn4 分钟前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
CssHero7 分钟前
基于vue3完成领域模型架构建设
前端
PanZonghui10 分钟前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
挽淚12 分钟前
JavaScript 数组详解:从入门到精通
javascript
言兴13 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte17 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常18 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常20 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
今禾21 分钟前
一行代码引发的血案:new Array(5) 到底发生了什么?
前端·javascript·算法
ccc101824 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端