利用vue3SeamlessScroll 简单实现列表的无限循环滚动

Vue3SeamlessScroll

该组件用于实现列表的无限循环滚动

1、安装

npm i vue3-seamless-scroll

2、导入及基本使用

<!--组件.vue-->
<script setup>import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';import {ref} from 'vue'//vue3导入组件是不需要用component注册的//导入完成后如果项目本身是在运行的记得重新编译项目,不然会报错,如npm run devconst listData = ref([{title:'事件1',content:'内容1'},{title:'事件2',content:'内容2'},{title:'事件3',content:'内容3'},{title:'事件4',content:'内容4'},])const isScroll=ref(true)
</script>
<template><div class="contain"><vue3-seamless-scrollclass="scroll"v-model="isScroll":list="listData":step="0.3":hover="true":limit-scroll-num="3":wheel="true"><div v-for="item in listData" class="item"><div class="title">{{item.title}}:{{item.content}}</div></div></vue3-seamless-scroll></div>
</template>
<style>.scroll{/* 必需要设置合适的高,因为他的原理是往列表最后添加列表重复元素,所以这个组件高不要大于其内容原先的最大高度 */height: 90px;width: 300px;overflow: hidden;}
</style>

3、配置项及解释

在标签中配置配置项(props属性)

list

无缝滚动列表数据,组件内部使用列表长度。

  type: Arrayrequired: true

 v-model

通过v-model控制动画滚动与停止,默认开始滚动

  type: Boolean,default: true,required: false

 direction

控制滚动方向,可选值updownleftright

  type: String,default: "up",required: false

 isWatch

开启数据更新监听

  type: Boolean,default: true,required: false

 hover

是否开启鼠标悬停

  type: Boolean,default: false,required: false

count

动画循环次数,默认无限循环

  type: Number,default: "infinite",required: false

 limitScrollNum

开启滚动的数据量,只有列表长度大于等于该值才会滚动

  type: Number,default: 5,required: false

 step

步进速度

  type: Number,required: false

 singleHeight

单步运动停止的高度

  type: Number,default: 0,required: false

singleWidth

单步运动停止的宽度

  type: Number,default: 0,required: false

singleWaitTime

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

  type: Number,default: 1000,required: false

isRemUnit

singleHeight and singleWidth 是否开启 rem 度量

  type: Boolean,default: true,required: false

delay

动画延时时间

  type: Number,default: 0,required: false

ease

动画效果,可以传入贝塞尔曲线数值

  type: String | cubic-bezier,default: "ease-in",required: false

copyNum

拷贝列表次数,默认拷贝一次,当父级高度大于列表渲染高度的两倍时可以通过该参数控制拷贝列表次数达到无缝滚动效果

  type: Number,default: 1,required: false

wheel

在开启鼠标悬停的情况下是否开启滚轮滚动,默认不开启

  type: boolean,default: false,required: false

singleLine

启用单行横向滚动

type: boolean,default: false,required: false

参考文章 :利用vue3SeamlessScroll简单实现列表的无限循环滚动,仅需几秒配置_vue3 表格循环滚动-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/824600.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

有公网IP,如何设置端口映射实现访问?

很多中小型公司或个人会根据自身需求自建服务器&#xff0c;或者将自己内网的服务、应用发布到外网&#xff0c;实现异地访问&#xff0c;如远程桌面、网站、数据库、公司的管理系统、FTP、管家婆、监控系统等等。 没接触过的人可能会觉得这个很难&#xff0c;实际上使用快解析…

Golang插件系统实现

插件可以在解耦的基础上灵活扩展应用功能&#xff0c;本文介绍了如何基于Golang标准库实现插件功能&#xff0c;帮助我们构建更灵活可扩展的应用。原文: Plugins with Go 什么是插件 简单来说&#xff0c;插件就是可以被其他软件加载的软件&#xff0c;通常用于扩展应用程序的功…

[入门]测试层级-ApiHug准备-测试篇-005

&#x1f917; ApiHug {Postman|Swagger|Api...} 快↑ 准√ 省↓ GitHub - apihug/apihug.com: All abou the Apihug apihug.com: 有爱&#xff0c;有温度&#xff0c;有质量&#xff0c;有信任ApiHug - API design Copilot - IntelliJ IDEs Plugin | Marketplace 这里的测…

学习STM32第十五天

SPI外设 一、简介 STM32F4XX内部集成硬件SPI收发电路&#xff0c;可以由硬件自动执行时钟生成、数据收发等功能&#xff0c;减轻CPU负担&#xff0c;可配置8位/16位数据帧&#xff0c;高位&#xff08;最常用&#xff09;/低位先行&#xff0c;三组SPI接口&#xff0c;支持DMA…

第一篇【传奇开心果系列】我和AI面对面聊编程:深度比较PyQt5和tkinter.ttk

传奇开心果系列博文 系列博文目录我和AI面对面聊编程系列 博文目录前言一、今天我们面对广大读者选择PyQt5和tkinter.ttk做比较这个话题目的是什么&#xff1f;二、举一个最简单的pyqt5信号和插槽的例子三、这和tkinter的点击事件有什么区别&#xff1f;四、如何选择&#xff1…

MySQL Explan执行计划详解

Explan执行计划 首先我们采用explan执行计划 执行一条sql&#xff0c;发现返回了12个列&#xff0c;下面会详细解释每一列 1、ID列 id列的值是代表了select语句执行顺序&#xff0c;是和select相关联的&#xff1b;id列的值大的会优先执行&#xff0c;如果id列为空最后执行&a…

数据库的创建

数据库分类 通过查看对象资源管理器来区分数据库类型 数据库物理文件的组成 : 数据库文件 日志文件 创建一个主数据文件和一个日志文件

上线流程及操作

上节回顾 1 搜索功能-前端&#xff1a;搜索框&#xff0c;搜索结果页面-后端&#xff1a;一种类型课程-APIResponse(actual_courseres.data.get(results),free_course[],light_course[])-搜索&#xff0c;如果数据量很大&#xff0c;直接使用mysql&#xff0c;效率非常低--》E…

淘宝商品数据抓取新策略:API接口助力获取标题、分类与店铺名

随着电子商务的迅猛发展&#xff0c;淘宝作为中国最大的网络购物平台&#xff0c;其商品数据对于众多商家、研究者和市场分析师来说具有极高的价值。然而&#xff0c;如何高效、准确地抓取淘宝商品数据&#xff0c;尤其是商品标题、分类和店铺名等关键信息&#xff0c;一直是一…

nginx部署上线

1. windows配置nginx 打包命令 npm run build:prod 1. 安装 nginx mac windows 2. mac / windows 环境下ngnix部署启动项目 2. nginx 解决 history 的 404 问题 3. nginx配置代理解决生产环境跨域问题

极速、易用、高度定制化的开源社区交流平台:Flarum

Flarum&#xff1a;轻盈高效&#xff0c;引领未来社区互动新风尚的革命性论坛平台- 精选真开源&#xff0c;释放新价值。 概览 Flarum是一款精心打造的现代网站讨论平台&#xff0c;以其精炼高效而著称。作为 esoTalk 和 FluxBB 的理念和技术的集大成者&#xff0c;Flarum 致力…

Ubuntu 20.04 LTS 在3588安卓主板上测试yolov8-1.0版本的yolov8n-seg模型

0. 创建虚拟环境 #!< 创建虚拟环境yolov8 $ sudo pip install virtualenv $ sudo pip install virtualenvwrapper $ mkvirtualenv yolov8 -p /usr/bin/python3.81. 将yolov8n-seg.pt转换为yolov8n-seg.onnx文件 #!< 创建项目目录yolov8-rknn并下载yolov8n-seg.pt模型文…

虚拟机vm桥接模式linux(centos,ubuntu)联网

台式机网线 查看宿主机网络 编辑虚拟机—>虚拟网络编辑器–>更改设置 选择&#xff0c;确定 进入linux系统 输入ip addr找到自己的网卡 我的是eno16777736 centos&#xff1a; 编辑 HWADDR"00:0C:29:54:CE:B8" TYPE"Ethernet" BOOTPROTO"…

公网IP多少钱可以购买?

公网IP是指可以在全球范围内访问和识别的唯一IP地址。对于许多企业和个人用户来说&#xff0c;公网IP是实现远程访问、搭建服务器、建立安全连接等重要需求的基础。公网IP的获取并不是免费的&#xff0c;并且价格因供应商和地区而异。 现有公网IP市场 当前&#xff0c;市场上有…

博弈论和sg函数

Nim游戏 题目链接&#xff1a;Nim游戏 先说结论&#xff1a;假设n堆石子&#xff0c;石子数分别为a1,a2,a3.....&#xff0c;则当a1^a2^a3^...^an0时先手必败&#xff0c;否则先手必胜。 因为所表示的二进制位必定是成对出现的&#xff0c;根据性质 1 ^ 1 0 &#xff0c;0 …

深入理解 pytest Fixture 方法及其应用

当涉及到编写自动化测试时&#xff0c;测试框架和工具的选择对于测试用例的设计和执行非常重要。在Python 中&#xff0c;pytest是一种广泛使用的测试框架&#xff0c;它提供了丰富的功能和灵活的扩展性。其中一个很有用的功 能是fixture方法&#xff0c;它允许我们初始化测试环…

HTML5漫画风格个人介绍源码

源码介绍 HTML5漫画风格个人介绍源码&#xff0c;源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面&#xff0c;重定向这个界面 效果截图 源码下载 HTML5漫画风格…

设计模式———单例模式

单例也就是只能有一个实例&#xff0c;即只创建一个实例对象&#xff0c;不能有多个。 可能会疑惑&#xff0c;那我写代码的时候注意点&#xff0c;只new一次不就得了。理论上是可以的&#xff0c;但在实际中很难实现&#xff0c;因为你无法预料到后面是否会脑抽一下~~因此我们…

【Pytorch】Conv1d

conv1d 先看看官方文档 再来个简单的例子 import torch import numpy as np import torch.nn as nndata np.arange(1, 13).reshape([1, 4, 3]) data torch.tensor(data, dtypetorch.float) print("[data]:\n", data) conv nn.Conv1d(in_channels4, out_channels1…

启明智显应用分享|基于ESP32-S3方案的SC01PLUS彩屏与chatgpt融合应用DEMO

今天将带大家真实体验科技与智慧的完美融合——SC01PLUS与ChatGPT的深度融合DEMO效果呈现。 彩屏的清晰显示与ChatGPT的精准回答&#xff0c;将为我们带来前所未有的便捷与高效。 SC01PLUS是启明智显基于ESP32-S3打造的一款3.5寸480*320分辨率的彩屏产品&#xff0c;您可以看…