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

相关推荐
GIS之路2 分钟前
GeoTools 结合 OpenLayers 实现空间查询
前端
轻语呢喃2 分钟前
每日LeetCode:合并两个有序数组
javascript·算法
陳有味_ChenUvi3 分钟前
使用 pnpm 优雅搭建 Monorepo 仓库
前端·npm·前端工程化
旷世奇才李先生5 分钟前
XML DOM 安装使用教程
xml·前端·chrome
程序员秘密基地12 分钟前
基于html,css,vue,vscode,vs2022,asp.net,aspnet,.net,c#,mysql数据库,在线健身,俱乐部管理系统
前端·vue.js·后端·mysql·asp.net
Mintopia15 分钟前
Three.js 画布纹理:像素世界的魔法编织术
前端·javascript·three.js
天天摸鱼的java工程师15 分钟前
当我成为面试官,我才知道当年那些面试官其实并不是在难为我,而是在考察我面对问题的拆解能力
前端·后端·面试
袁煦丞18 分钟前
泰拉瑞亚远程联机魔法:cpolar内网穿透实验室第617个成功挑战
前端·程序员·远程工作
玲小珑22 分钟前
Next.js 教程系列(十二)API Routes:构建轻量级后端服务
前端·next.js
JinSo27 分钟前
EasyEditor AI 聊天助手:让低代码开发更简单
前端·javascript·github