利用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;通常用于扩展应用程序的功…

浅谈-“指针”

为什么要使用指针&#xff1f; 1.函数的值传递&#xff0c;无法通过调用函数&#xff0c;来修改函数的实参 2.被调用函数需要提供更多的“返回值”给调用函数 3.减少值传递时带来的额外开销&#xff0c;提高代码执行效率 ---> int a[10] > 40 字节 int *p; pa;…

Spring Boot 打印 Controller 返回的body数据

背景是获取Controller类输出的结果数据。 实现方案&#xff0c;使用RestControllerAdviceResponseBodyAdvice接口。不能使用Interceptor&#xff0c;在执行Interceptor时&#xff0c;response已经提交。也可以考虑aspect方案&#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 这里的测…

WebKit结构深度解析:打造高效与安全的浏览器引擎

WebKit结构深度解析&#xff1a;打造高效与安全的浏览器引擎 在现代网络世界中&#xff0c;浏览器作为连接用户与互联网信息的桥梁&#xff0c;其背后的技术架构至关重要。WebKit&#xff0c;作为当今最流行的开源浏览器引擎之一&#xff0c;其结构设计和功能实现对于提升浏览…

统一SQL-number/decimal/dec/numeric转换

统一SQL介绍 https://www.light-pg.com/docs/LTSQL/current/index.html 源和目标 源数据库&#xff1a;Oracle 目标数据库&#xff1a;Postgresql&#xff0c;TDSQL-MySQL&#xff0c;达梦8&#xff0c;LightDB-Oracle 操作目标 通过统一SQL&#xff0c;将Oracle中的numb…

持续集成和持续部署

持续集成&#xff08;Continuous Integration&#xff0c;简称CI&#xff09;和持续部署&#xff08;Continuous Deployment&#xff0c;简称CD&#xff09;是现代软件开发中的重要实践&#xff0c;旨在提高开发团队的效率和软件交付的质量。 持续集成是指开发人员将代码频繁地…

学习STM32第十五天

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

《AI编程类工具之四——GitHub copiot》

一.简介 官网&#xff1a;https://github.com/features/copilot GitHub Copilot是由GitHub和OpenAI合作开发的一款人工智能编程助手。这款工具基于OpenAI的GPT-3模型进行训练&#xff0c;旨在帮助开发者更高效地编写代码。 二.功能介绍 智能代码补全&#xff1a;GitHub Cop…

.NetCore——自定义筛选器

【异常筛选器】 在 ASP.NET Core Web API 中,异常处理是一个非常重要的环节,如果程序中出现未处理异常,就会生成响应报文。通过捕获和处理异常,我们可以确保应用程序的健壮性,并向用户提供友好的错误响应。ASP.NET Core 提供了一种机制,即异常筛选器(Exception Filters…

第一篇【传奇开心果系列】我和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…

kafka安装与相关配置详解

一、安装 1、下载与解压 tar -xzf kafka_2.13-3.7.0.tgz cd kafka_2.13-3.7.02、启动 bin/kafka-server-start.sh config/server.properties3、后台启动 bin/kafka-server-start.sh -daemon config/server.properties4、zookeeper [admin, brokers, cluster, config, con…

淘宝商品数据抓取新策略: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模型文…