当前位置：首页 > news >正文

vue使用vue-seamless-scroll进行轮播滚动展示内容

news 来源：原创 2025/7/13 21:26:34

我这里只是记录下一些基本的东西，具体大家可以查看官网介绍，有更详细的使用文档（目前有vue和js版本）：
https://chenxuan0000.github.io/vue-seamless-scroll/zh/

在这里插入图片描述

安装组件：

npm install vue-seamless-scroll --save

使用
注册组件：

// **main.js**
// 1.全局 install
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)// 或者你可以自己设置全局注册的组件名 默认注册的组件名是 vue-seamless-scroll
Vue.use(scroll,{componentName: 'scroll-seamless'})// 2.单个.vue文件局部注册
<script>import vueSeamlessScroll from 'vue-seamless-scroll'export default {components: {vueSeamlessScroll}}
</script>

使用组件

<template><vue-seamless-scroll :data="listData" class="warp"><ul class="item"><li v-for="(item, index) in listData" :key="index"><span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span></li></ul></vue-seamless-scroll>
</template><script>import vueSeamlessScroll from 'vue-seamless-scroll'export default {name: 'Example01Basic',components: {vueSeamlessScroll},data () {return {listData: [{'title': '无缝滚动第一行无缝滚动第一行','date': '2017-12-16'}, {'title': '无缝滚动第二行无缝滚动第二行','date': '2017-12-16'}, {'title': '无缝滚动第三行无缝滚动第三行','date': '2017-12-16'}, {'title': '无缝滚动第四行无缝滚动第四行','date': '2017-12-16'}, {'title': '无缝滚动第五行无缝滚动第五行','date': '2017-12-16'}, {'title': '无缝滚动第六行无缝滚动第六行','date': '2017-12-16'}, {'title': '无缝滚动第七行无缝滚动第七行','date': '2017-12-16'}, {'title': '无缝滚动第八行无缝滚动第八行','date': '2017-12-16'}, {'title': '无缝滚动第九行无缝滚动第九行','date': '2017-12-16'}],}},}
</script><style lang="scss" scoped>.warp {height: 270px;width: 360px;margin: 0 auto;overflow: hidden;ul {list-style: none;padding: 0;margin: 0 auto;li,a {display: block;height: 30px;line-height: 30px;display: flex;justify-content: space-between;font-size: 15px;}}}
</style>

效果
在这里插入图片描述

一、组件配置项介绍：
data：

type: Array
required: true

无缝滚动 list 数据。

组件内部只关注 data 数组的 length。

classOption
#step

type: Number
required: false
default：1

数值越大速度滚动越快。

step 值不建议太小,不然会有卡顿效果(如果设置了单步滚动,step 需是单步大小的约数,否则无法保证单步滚动结束的位置是否准确。~~~~~,比如单步设置的 30,step 不能为 4)。

#limitMoveNum

type: Number
required: false
default：5

开启无缝滚动的数据量。

#hoverStop

type: Boolean
required: false d
efault：false

是否启用鼠标 hover 控制。

#direction

type: Number
required: false
default：1

方向: 0 往下 1 往上 2 向左 3 向右。

#openTouch

type: Boolean
required: false
default：true

移动端开启 touch 滑动。

#singleHeight

type: Number
required: false
default：0

单步运动停止的高度(默认值 0 是无缝不停止的滚动)，direction 为 0|1 时生效。

#singleWidth

type: Number
required: false
default：0

单步运动停止的宽度(默认值 0 是无缝不停止的滚动)，direction 为 2|3 时生效。

#waitTime

type: Number
required: false
default：1000

单步停止等待时间(默认值 1000ms)。

#switchOffset

type: Number
required: false
default：30

左右切换按钮距离左右边界的边距(px)。

#autoPlay

type: Boolean
required: false
default：true

需要实现手动切换左右滚动的时候,必须设置autoPlay:false（1.1.17 版本开始，只需要设置navigation:false）,目前不支持环路。

#switchSingleStep

type: Number
required: false
default：134

手动单步切换 step 值(px)。

#switchDelay

type: Number
required: false
default：400

单步切换的动画时间(ms)。

#switchDisabledClass

type: String
required: false
default：disabled

不可以点击状态的 switch 按钮父元素的类名。

#isSingleRemUnit

type: Boolean
required: false
default：false

singleHeight and singleWidth 是否开启 rem 度量。

#navigation

type: Boolean
required: false
default：false

左右方向的滚动是否显示控制器按钮，true 的时候 autoPlay 自动变为 false。

二、回调事件

<template><vue-seamless-scroll :data="listData" @ScrollEnd="ScrollEnd" class="warp"><ul class="item"><li v-for="(item, index) in listData" :key="index"><span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span></li></ul></vue-seamless-scroll>
</template>

ScrollEnd

    ScrollEnd: function(){console.log("ScrollEnd")}

vue使用vue-seamless-scroll进行轮播滚动展示内容

我这里只是记录下一些基本的东西，具体大家可以查看官网介绍，有更详细的使用文档（目前有vue和js版本）： https://chenxuan0000.github.io/vue-seamless-scroll/zh/ 安装组件： npm install vue-seamless-scro…...

编程日记 2025/7/13 21:26:34

python入门

目录一、Python的诞生二、Python的特点三、Python环境的搭建 1.搭建运行环境 2.搭建开发环境一、Python的诞生如果大家在上大学之前有接触过一些关于编程的课程，Python绝对是最早接触的语言之一。在学习任何一门编程语言之前，都需要了解它的…...

编程日记 2025/7/8 20:43:17

深度解析 Python 网络框架：Django、Tornado、Flask 和 Twisted

目录引言Python 网络框架概述Django：全栈开发的首选框架 3.1 Django 的核心特性3.2 Django 的应用场景3.3 优势与不足 Tornado：高性能的异步框架 4.1 Tornado 的异步特性4.2 Tornado 的应用场景4.3 优势与不足 Flask：轻量级的微框架 5.1 Fl…...

编程日记 2025/7/13 12:08:41

摆脱Zotero存储限制：WebDAV结合内网穿透打造个人文献管理云平台

文章目录前言一、Zotero安装教程二、群晖NAS WebDAV设置三、Zotero设置四、使用公网地址同步Zotero文献库五、使用永久固定公网地址同步Zotero文献库前言如果你是科研工作者、学生或者任何需要频繁处理大量学术资料的人士，你一定对如何高效管理和引用文献感到头…...

编程日记 2025/7/13 17:18:24

Unity 对Sprite或者UI使用模板测试扣洞

新建两个材质球： 选择如下材质设置如下参数： 扣洞图片或者扣洞UI的材质球 Sprite或者UI的材质球新建一个单独Hole的canvas，将SortOrder设置为0，并将原UI的canvans的SortOrder设置为1 对2DSprite则需要调整下方的参数 hole的O…...

编程日记 2025/7/10 15:17:23

Wend看源码-Java-Arrays 工具集学习

摘要 java.util.Arrays 是 Java 标准库中的一个实用工具类，它提供了各种静态方法来操作数组，包括排序、搜索、比较、填充等。这些方法简化了对数组的操作，并且在很多情况下可以提高代码的可读性和效率。以下是关于Arrays类中提供的一些主要方…...

编程日记 2025/7/10 17:54:51

【算法复健】0102 快速选择算法

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、算法引入1. 冒泡排序2.快速排序3. 快速选择(1)题目：数组中的第K个最大元素（2）代码前言本文由快速排序算法引入快速选…...

编程日记 2025/7/13 22:24:34

【疑难杂症】 HarmonyOS NEXT中Axios库的响应拦截器无法拦截424状态码怎么办？

今天在开发一个HarmonyOS NEXT的应用的时候，发现http接口如果返回的状态码是424时，我在axios中定义的拦截器失效了。直接走到了业务调用的catch中。问题表现： 我的拦截器代码如下： 解决办法： 先说解决办法&#xff…...

编程日记 2025/7/10 3:44:34

口语笔记——使动词

每个使动词都可以有三种形式，以move为例： move作为动词可表达：使……感动，让……感动，通常用于主谓宾结构。ed作为形容词可表达：感动的，通常用于主系表结构。ing作为形容词可表达：令…...

编程日记 2025/7/8 1:18:42

SQL-leetcode-196. 删除重复的电子邮箱

196. 删除重复的电子邮箱表: Person -------------------- | Column Name | Type | -------------------- | id | int | | email | varchar | -------------------- id 是该表的主键列(具有唯一值的列)。该表的每一行包含一封电子邮件。电子邮件将不包含大写字母。编写解…...

编程日记 2025/7/10 19:48:38

汇编语言:从键盘输入数字字符,(计算阶乘),以无符号十进制形式输出（分支、循环程序）

1.分支结构原理分支结构是汇编语言中的一种基本控制结构，它允许程序根据条件选择执行不同的路径。分支结构通常通过跳转（jump）指令来实现。条件判断： 汇编语言中的条件判断通常通过比较（compare）指令来实…...

编程日记 2025/7/8 1:56:14

汽车损坏识别检测数据集，使用yolo，pasical voc xml，coco json格式标注，6696张图片，可识别11种损坏类型，识别率89.7%

汽车损坏识别检测数据集，使用yolo，pasical voc xml，coco json格式标注，6696张图片，可识别11种损坏类型损坏： 前挡风玻璃（damage-front-windscreen ） 损坏的门 （damaged-d…...

编程日记 2025/7/13 13:36:22

python的urllib模块和http模块

1.python的urllib库用于操作网页，并对网页内容进行处理 urllib包有如下模块： urllib.request：打开和读取URL urllib.error： 包含urllib.request抛出的异常 urllib.parse： 解析URL urllib.robotparser&#xff1…...

编程日记 2025/7/10 15:20:39

Codigger集成Copilot：智能编程助手

在信息技术的快速发展中，编程效率和创新能力的提升成为了开发者们追求的目标。Codigger平台通过集成Copilot智能编程助手，为开发者提供了一个强大的工具，以增强其生产力、创新力和技能水平。本文将深入探讨Codigger与Copilot的集成如何为IT专…...

编程日记 2025/7/9 8:08:35

快递物流查询API接口推荐

针对快递物流查询API接口及行政区划解析的需求，以下是一些推荐和解析： ### 一、快递物流查询API接口推荐 1. **ShowAPI** * **功能**：支持国内外1500快递物流公司的物流跟踪服务，包括顺丰、圆通、申通、中通、韵达等主流快递公司…...

编程日记 2025/7/11 8:56:27

【Unity3D】3D渲染流水线总结

3D渲染流水线： CPU阶段（应用阶段）： 1、加载数据：硬盘->内存->显存场景数据从硬盘HDD加载到内存RAM，网格和纹理等数据会再次加载到显存VRAM，显卡对显存访问速度更快。 2、设置渲染状态…...

编程日记 2025/7/13 18:32:39

LevelDB 源码阅读：利用 Clang 的静态线程安全分析

LevelDB 中有一些宏比较有意思，平时自己写代码的时候，还基本没用过。这些宏在 thread_annotations.h 中定义，可以在编译时使用 Clang 编译器的线程安全分析工具，来检测潜在的线程安全问题。比如下面这些宏，到底有什么…...

编程日记 2025/7/11 14:47:05

不只是工具：ChatGPT写作在学术中的创新思维与深度思考

目录 1.数据选择与质量 2.Prompt技巧 1.明确任务 2.上下文信息 3.好的示例 3.后期编辑与润色随着AIGC技术的迅猛发展和不断升级，AI写作正逐渐成为各行各业的新宠。然而不少宝子们们却发现了一个有趣的现象：虽然都是依赖AI生成文本，有些…...

编程日记 2025/7/13 9:58:52

全国青少年信息学奥林匹克竞赛（信奥赛）备考实战之循环结构（for循环语句）（八continue语句和break语句）

在C中，continue语句和break语句都是用于控制循环的执行流程的关键字，但它们有不同的用途和行为。 1、break语句用于立即终止当前所在的循环或switch语句，并跳出循环体，继续执行循环之后的代码，break语句用于直接跳出循…...

编程日记 2025/7/8 15:26:14

实例： execute sp_executesql Nselect count(1) FROM table X2 WITH(NOLOCK) WHERE X2.UPDDTTM > DT_START AND X2.UPDDTTM < DT_END , NDT_START datetime,DT_END datetime, DT_START2025-01-02 10:06:58.620,DT_END2025-01-02 10:09:35.457 参考&…...

编程日记 2025/7/8 21:26:06

【数据结构Ⅰ复习题】

如有错误欢迎指正，题目根据教材----------严蔚敏数据结构（c语言版第2版）人民邮电电子版数据结构Ⅰ复习题一、填空题1．算法应该具备的5个重要特性有___有穷性___、确定性、可行性、输入和输出。2．非空单链表L中*p是头…...

编程日记 2025/7/12 18:33:19

经验证：将数据从索尼传输到Android的 4 种方法

概括像Android Galaxy S20 这样的新型Android智能手机很酷，但除了将数据从索尼传输到Android之外。众所周知，旧的索尼手机上存储着大量的文件，因此将数据从旧的索尼手机传输到新的Android手机非常重要。为了解决这个问题，我们做…...

编程日记 2025/7/9 20:43:34

服务器端请求伪造之基本介绍

一.服务器端请求伪造漏洞基础 1.客户端请求客户端请求指的是由客户端设备（如个人计算机、智能手机、平板电脑等）或软件（浏览器、各种APP）发出的请求，以获取指定的网页、图片、视频或其他资源。比如当用户在浏览器中输…...

编程日记 2025/7/8 23:10:32

Java反射详解（三）

上一篇博客：Java反射详解（二） 写在前面：大家好！我是晴空๓。如果博客中有不足或者的错误的地方欢迎在评论区或者私信我指正，感谢大家的不吝赐教。我的唯一博客更新地址是：https://ac-fun.blog.c…...

编程日记 2025/7/9 11:49:03

HTML——59. maxlength和disabled属性

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>maxlength和disabled属性</title></head><body> …...

编程日记 2025/7/11 19:11:18

Java中的函数式接口详解（一）

1. 函数式接口 1.1. 定义函数式接口（Function Interface）就是一个有且仅有一个抽象方法，但是可以有多个非抽象方法的接口。函数式接口又称为：功能接口。功能接口为 Lambda 表达式和方法引用(用双冒号 ::来进行方法调用)提供…...

编程日记 2025/7/8 8:30:39

Quo Vadis, Anomaly Detection? LLMs and VLMs in the Spotlight 论文阅读

文章信息： 原文链接：https://arxiv.org/abs/2412.18298 Abstract 视频异常检测（VAD）通过整合大语言模型（LLMs）和视觉语言模型（VLMs）取得了显著进展，解决了动态开放世界…...

编程日记 2025/7/12 16:36:24

redis的学习（二）

4 哈希表哈希类型中的映射关系通常称为field-value，⽤于区分Redis整体的键值对（key-value）， 注意这⾥的value是指field对应的值，不是键（key）对应的值， 4.1 操作命令 hset&#xff…...

编程日记 2025/7/13 1:01:40

简单使用linux

1.1 Linux的组成 Linux 内核：内核是系统的核心，是运行程序和管理像磁盘和打印机等硬件设备的核心程序。文件系统 : 文件存放在磁盘等存储设备上的组织方法。 Linux 能支持多种目前浒的文件系统，如 ext4 、 FAT 、 VFAT 、 ISO9660 、 NF…...

编程日记 2025/7/10 20:16:38

springboot541党员学习交流平台(论文+源码)_kaic

摘要如今社会上各行各业，都喜欢用自己行业的专属软件工作，互联网发展到这个时候，人们已经发现离不开了互联网。新技术的产生，往往能解决一些老技术的弊端问题。因为传统党员学习交流平台信息管理难度大，容错率低&am…...

编程日记 2025/7/9 15:04:41

心力衰竭相关临床记录数据分析开发技术概述

心力衰竭相关临床记录数据分析开发技术概述心力衰竭临床记录数据分析的开发涉及多种技术，包括数据采集、处理、建模和可视化等方面。以下是从技术角度对整个开发流程的概述： 数据采集技术 1.1 数据来源公开数据集：如 UCI 数据存储库、Clin…...

编程日记 2025/7/8 4:56:44

SpringMVC（六）拦截器

目录 1.什么是拦截器 2.拦截器和过滤器有哪些区别 3.拦截器方法 4.单个拦截器的执行流程 5.使用拦截器实现用户登录权限验证（实例） 1.先在html目录下写一个login.html文件 2.在controller包下写一个LoginController文件 3.加拦截器 1.创建一个conf…...

编程日记 2025/7/9 13:56:32

将simpletex 识别的公式复制到ppt 中

1）点击复制MathML(word) 2）右击粘贴到任意word 中 3）将word公式粘到 office (2019) 的ppt 中线上识别链接：SimpleTex - Snip & Get!...

编程日记 2025/7/3 13:14:04

vs 2022 中xml 粘贴为Class 中，序列化出来的xml 的使用

上图是visual studio 2022 中使用的粘贴功能的菜单位置在生成的xml 中，有些是类似如下类型的 [System.Serializable] [System.Xml.Serialization.XmlType] public class Item {private bool isVisibleField;private bool isVisibleFieldSpecified;[System.Xml.Se…...

编程日记 2025/7/9 1:31:44

短视频平台的视频水印怎么去除？

当你看到某个短视频，觉得内容非常有价值，想要个人收藏以便日后学习或回顾，但发现短视频平台无法直接下载且带有水印时，以下提供的几种方法将帮助你轻松去除水印，获取高清无水印的视频内容。方法一：使用第…...

编程日记 2025/7/7 7:12:23

《Vue3实战教程》34：Vue3状态管理

如果您有疑问，请观看视频教程《Vue3实战教程》状态管理什么是状态管理？ 理论上来说，每一个 Vue 组件实例都已经在“管理”它自己的响应式状态了。我们以一个简单的计数器组件为例： vue <script setup> import { r…...

编程日记 2025/7/10 17:25:51

AI大模型系列之七：Transformer架构讲解

目录 Transformer网络是什么？ 输入模块结构： 编码器模块结构： 解码器模块: 输出模块结构： Transformer 具体是如何工作的？ Transformer核心思想是什么？ Transformer的代码架构自注意力机制是什么…...

编程日记 2025/7/13 11:20:01

每天五分钟机器学习：凸集

本文重点在SVM中，目标函数是一个凸函数，约束集合是一个凸集。因此，SVM问题可以转化为一个凸规划问题来求解。这使得SVM在实际应用中具有较高的计算效率和准确性。凸集的定义凸集是指一个集合中的任意两点之间的线段都完全包含在这个集合中。换句话说，给定集合C中的两…...

编程日记 2025/7/9 21:29:00

【智能算法】改进蚁狮优化算法【matlab】

目录 1 主要内容 2 部分程序 3 程序结果下载链接 1 主要内容该程序方法复现《改进蚁狮算法的无线传感器网络覆盖优化》两种改进算法模型，即原始ALO算法的基础上添加了两种改进策略： - 改进1：将原先的间断性边界收缩因子变为连续性边界…...

编程日记 2025/7/10 18:32:37

【Python】闭包

闭包（Closure）是指一个函数记住了并可以访问它的词法作用域（lexical scope），即使这个函数在词法作用域之外执行。闭包其实就是延伸了作用域的函数，包括被延伸函数主体中引用的非全局变量和局部变量。这些…...

编程日记 2025/7/9 14:54:51

Python跨年烟花

目录系列文章写在前面技术需求完整代码下载代码代码分析 1. 程序初始化与显示设置 2. 烟花类 (Firework) 3. 粒子类 (Particle) 4. 痕迹类 (Trail) 5. 烟花更新与显示 6. 主函数 (fire) 7. 游戏循环 8. 总结注意事项写在后面系列文章序号直达链接爱…...

编程日记 2025/7/7 10:36:06

QT------------其他工具软件和技术

实现思路多语言界面程序设计： 使用 QTranslator 类为 QT 应用程序提供多语言支持。将不同语言的翻译文件（.qm 文件）添加到应用程序中，根据用户的语言设置动态加载相应的翻译文件。 QT 样式表（QSS）&#x…...

编程日记 2025/6/30 20:16:34

数据结构9.3 - 文件基础(C++)

目录 1 打开文件字符读写关闭文件上图源自：https://blog.csdn.net/LG1259156776/article/details/47035583 1 打开文件法 1法 2ofstream file(path);ofstream file;file.open(path); #include<bits/stdc.h> using namespace std;int main() {char path[]…...

编程日记 2025/7/3 2:47:25

javaEE-文件操作和IO-文件

目录一.什么是文件 1.文件就是硬盘(磁盘)上的文件。 2.计算机中存储数据的设备： 3.硬盘的物理特征 4.树型结构组织和⽬录 5.文件路径文件路径有两种表示方式： 6.文件的分类二、java中文件系统的操作 1.File类中的属性： 2.构造方…...

编程日记 2025/7/6 19:48:14

富芮坤FR800X系列之软件开发工具链（如IDE、编译器、调试器等）

文章目录一、IDE（集成开发环境）二、编译器三、调试器四、其他辅助工具五、小结 FR800x系列作为一款低功耗蓝牙芯片，其软件开发工具链对于开发者来说至关重要。以下是对FR800x软件开发工具链的详细介绍，包括IDE（集成开…...

编程日记 2025/7/13 13:00:18

微服务-Eureka

Eureka的作用使用RestTemplate完成远程调用需要手动的生命被调用者的ip和端口，从而能够发起http请求，但是如果有很多个实例也更加不能有效的处理，而且我们又该如何知道这些实例是否健康呢。所以就有了很多的注册中心比如Eureka、Nacos等等。…...

编程日记 2025/7/10 17:48:31

Elasticsearch: 高级搜索

一、match_all匹配所有文档 1、介绍： match_all查询是一个特殊的查询类型，它用于匹配索引中的所有文档，而不考虑任何特定的查询条件。基本语法： GET /<your-index-name>/_search {"query": {"match_all…...

编程日记 2025/7/9 18:09:38

项目优化之策略模式

目录策略模式基本概念策略模式的应用场景实际项目中具体应用项目背景： 策略模式解决方案： 计费模块策略模式简要代码策略模式基本概念策略模式(Strategy Pattern) 是一种行为型设计模式，把算法的使用放到环境类中，而算…...

编程日记 2025/7/8 8:02:41

HTML——57. type和name属性

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>type和name属性</title></head><body><!--2.input元素不仅可以在form标签内使用也可以在form标签外使用-…...

编程日记 2025/7/12 20:56:49

LabVIEW 实现自动对焦的开发

自动对焦（Autofocus, AF）技术是通过分析图像或传感器信号，动态调整焦点位置以实现清晰成像或高精度定位的过程。在LabVIEW中，可以通过集成信号采集、数据处理、控制算法和硬件接口模块，实现多种自动对焦方法&#xff0…...

编程日记 2025/7/7 7:02:38

相关文章：