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

相关推荐
拾光拾趣录6 分钟前
虚拟DOM
前端·vue.js·dom
爱学习的茄子6 分钟前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神8 分钟前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
ruanhongbiao9 分钟前
饿了么el-upload上传组件报错:TypeError: ***.upload.addEventListener is not a function
javascript·elementui
_一两风10 分钟前
JS执行机制-event loop
javascript
止观止10 分钟前
JavaScript对象创建9大核心技术解析
开发语言·javascript·ecmascript
摆烂为不摆烂11 分钟前
😁深入JS(五): 一文让你完全理解 hash 与 history 路由,手写前端路由
前端
1024小神12 分钟前
cocos游戏开发中,如何制作一个空气墙
前端·javascript
爱编程的喵12 分钟前
深入理解JavaScript事件循环机制:从同步到异步的完整解析
前端·javascript
合作小小程序员小小店12 分钟前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app