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

vue3实现无限循环滚动的方法;el-table内容无限循环滚动的实现

需求:vue3实现一个div内的内容无限循环滚动

方法一:

<template><div id='container'><div class="item" v-for=item in 5>测试内容{{{ item }}</div></div>
</template><script setup>
//封装一个方法
const fengzhuang = (containerId) => {let intervalId = nullconst container = document.getElementById(containerId)// console.log("container",container.scrollTop);const content = container.scrollHeightlet containerHeight = container.clientHeightlet containerScrollTop = container.scrollToplet currentScrollTop = 0;const startScrolling = () => {stopScrolling()intervalId = setInterval(() => {currentScrollTop += 1.5if(currentScrollTop >= content - containerHeight){currentScrollTop = 0}containerScrollTop = currentScrollTop;container.scrollTop = containerScrollTop;}, 50)}const stopScrolling = () => {clearInterval(intervalId)}const checkOverflow = () => {if (content > containerHeight) {startScrolling()} else {stopScrolling()}}checkOverflow()
}
//进入页面时执行这个方法
onMounted(()=> {fengzhuang('container')
})
</script>

方法二:

<template><div id='container'><div id="content"><div id="scrollWrapper"><div class="item" v-for=item in 5>测试内容{{{ item }}</div></div></div></div>
</template><script setup>
//封装一个方法
let shouldScroll = ref(false)
const fengzhuang2 = (containerId,contentId,scrollWrapperId)=> {const container = document.getElementById(containerId)const content = document.getElementById(contentId)const scrollWrapper = document.getElementById(scrollWrapperId)const startScrolling = (scrollWrapper)=> {const scrollSpeed = 0.01;console.log("scrollWrapper.offsetHeight",scrollWrapper.offsetHeight);const contentHeight = scrollWrapper.offsetHeight;const containerHeight = container.offsetHeight;// 设置初始滚动位置scrollWrapper.style.transform = "translateY(0px)";// 启动动画scrollWrapper.animate([{ transform: "translateY(0px)" },{ transform: `translateY(-${contentHeight-320}px)` },// { transform: `translateY(-${containerHeight}px)` },], {duration: (contentHeight + containerHeight) * scrollSpeed * 1000,easing: "linear",iterations: Infinity,});}if (content.offsetHeight > container.offsetHeight) {shouldScroll.value = true;startScrolling(scrollWrapper);}
}
//进入页面时执行这个方法
onMounted(()=> {fengzhuang2('container','content','scrollWrapper')
})
</script>

方法三:

<template><div class="scroll-container"><div class="scroll-content" :style="contentStyle"><!-- 内容项 --><div v-for="(item, index) in items" :key="index" class="scroll-item" >{{ item }}</div></div></div>
</template><script>
import { ref, onMounted, watchEffect } from "vue";export default {setup() {const items = ref(["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"]); // 你的内容项数组const containerHeight = 200; // 调整滚动容器的高度const scrollSpeed = 0.5; // 调整滚动速度const contentStyle = ref({transform: "translateY(0)",});let currentIndex = 0;const contentHeight = items.value.length * 40; // 假设每个项的高度为40pxconst scrollFrame = () => {currentIndex += scrollSpeed;if (currentIndex >= contentHeight) {currentIndex = 0;}// const itemToMove = items.value.slice(parseInt(currentIndex/40))if(currentIndex % 40 == 0){// const itemToMove = items.value.slice(currentIndex/40)[0]; // 弹出第一个元素// const itemToMove = items.value.shift(); // 弹出第一个元素console.log("itemToMove");items.value.push(itemToMove); // 将弹出的元素放到数组末尾}contentStyle.value.transform = `translateY(-${currentIndex}px)`;};onMounted(() => {// 每帧滚动const scrollInterval = setInterval(scrollFrame, 15); // 16ms对应60帧每秒// 当滚动容器高度改变时,重新计算当前位置以实现无缝滚动watchEffect(() => {// currentIndex = currentIndex % contentHeight;contentStyle.value.transform = `translateY(-${currentIndex}px)`;});// 清除滚动定时器return () => clearInterval(scrollInterval);});return {items,contentStyle,};},
};
</script><style scoped>
.scroll-container {height: 40px; /* 调整滚动容器的高度 */overflow: hidden;border: 1px solid #ccc;
}.scroll-content {display: flex;flex-direction: column;animation: scroll 5s linear infinite; /* 5秒完成一次滚动,可根据需要调整 */
}.scroll-item {height: 40px; /* 每个滚动项的高度 */line-height: 40px;padding: 10px;background-color: #f0f0f0;
}@keyframes scroll {0% {transform: translateY(0);}100% {transform: translateY(-100%);}
}
</style>

补充:el-table实现内容无限循环滚动方法:

let scrollHeight = 0
let currentScrollTop = 0
let maxScrollTop = 0
let timeInter = null
let timeInter2 = null
const tableNode = ref<any>(null)function updateList() {// 数据大于3条才会滑动if (tableData && tableData.value.length > 4) {// 获取滑动区域DOM 最新版本的element-plus节点有变化, 此版本为1.2.0-beta.3tableNode.value = tableRef.value.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]    // 设置每次滑动几行scrollHeight = tableNode.value.querySelectorAll('tr')[0].offsetHeight * 4// 设置每次滑动的PX和滑动区域的高度tableNode.value.style.height = `${scrollHeight}px`// 获取最大滑动空间maxScrollTop = tableNode.value.firstElementChild.offsetHeight - scrollHeight// 开始restTimeInter()}
}function restTimeInter() {// 清除所有定时器clearAllInterval()// 设置定时器timeInter = setInterval(setMultiLine, 1500)
}
function clearAllInterval() {clearInterval(timeInter)clearInterval(timeInter2)
}
function setScrollTop() {tableNode.value.scrollTop++if (tableNode.value.scrollTop >= currentScrollTop) { // 达到下次应该滑动的位置clearInterval(timeInter2)}if (tableNode.value.scrollTop > maxScrollTop) { // 滑到底了tableNode.value.scrollTop = maxScrollTopclearInterval(timeInter2)}
}
function setMultiLine() {// 下次应该滑到哪currentScrollTop = (tableNode.value.scrollTop || 0) + scrollHeight + currentScrollTop % scrollHeightif (tableNode.value.scrollTop >= maxScrollTop) { // 滑完了 重置currentScrollTop = 0tableNode.value.scrollTop = 0restTimeInter()} else {// 清除上一个定时器clearInterval(timeInter2)// 开始滑timeInter2 = setInterval(setScrollTop, 10)}
}
onMounted(()=> {setTimeout(() => {updateList()}, 1000)
})

以上三种方法均能实现无限循环滚动,但是滚动的效果不是无缝衔接的,是滚动到最底部后直接闪现到内容顶部开始重新滚动;要想实现无缝衔接滚动,目前用js是难以实现的,为此花费了好长时间也没能实现,最后在bd中查到了可以实现这一功能的插件,比如vue3-seamless-scroll插件,具体的插件安装和使用可自行百度;

相关文章:

vue3实现无限循环滚动的方法;el-table内容无限循环滚动的实现

需求&#xff1a;vue3实现一个div内的内容无限循环滚动 方法一&#xff1a; <template><div idcontainer><div class"item" v-foritem in 5>测试内容{{{ item }}</div></div> </template><script setup> //封装一个方法…...

Windows 安装 MariaDB 数据库

之前一直使用 MySQL&#xff0c;使用 MySQL8.0 时候&#xff0c;占用内存比较大&#xff0c;储存空间好像也稍微有点大&#xff0c;看到 MariaDB 是用来代替 MySQL 的方案&#xff0c;之前用着也挺得劲&#xff0c;MySQL8.0 以上好像不能去导入低版本的 sql&#xff0c;或者需要…...

RK3568-mpp(Media Process Platform)媒体处理软件平台

第一章 MPP 介绍 1.1 概述 瑞芯微提供的媒体处理软件平台(Media Process Platform,简称 MPP)是适用于瑞芯微芯片系列的通用媒体处理软件平台。 该平台对应用软件屏蔽了芯片相关的复杂底层处理,其目的是为了屏蔽不同芯片的差异,为使用者提供统一的视频媒体处理接口(Medi…...

【ModelSim】使用终端命令行来编译、运行Verilog程序,创建脚本教程

▚ 01 ModelSim命令解说 &#x1f4e2; 这些命令是 ModelSim 中常用的命令&#xff0c;用于创建库、编译源代码和启动仿真。 &#x1f514; 在使用这些命令之前&#xff0c;你需要在 ModelSim 的命令行界面或脚本中执行 vlib 命令来创建一个库&#xff0c;然后使用 vlog 命令…...

腾讯云网站备案详细流程_审核时间说明

腾讯云网站备案流程先填写基础信息、主体信息和网站信息&#xff0c;然后提交备案后等待腾讯云初审&#xff0c;初审通过后进行短信核验&#xff0c;最后等待各省管局审核&#xff0c;前面腾讯云初审时间1到2天左右&#xff0c;最长时间是等待管局审核时间&#xff0c;网站备案…...

HTTP介绍:一文了解什么是HTTP

前言&#xff1a; 在当今数字时代&#xff0c;互联网已经成为人们生活中不可或缺的一部分。无论是浏览网页、发送电子邮件还是在线购物&#xff0c;我们都离不开超文本传输协议&#xff08;HTTP&#xff09;。HTTP作为一种通信协议&#xff0c;扮演着连接客户端和服务器的重要角…...

动态规划之子数组系列

子数组系列 1. 环形⼦数组的最⼤和2. 乘积最大子数组3. 等差数列划分4. 最长湍流子数组5. 单词拆分6. 环绕字符串中唯⼀的子字符串 1. 环形⼦数组的最⼤和 1.题目链接&#xff1a;环形⼦数组的最⼤和 2.题目描述&#xff1a;给定一个长度为 n 的环形整数数组 nums &#xff0c…...

LeetCode(力扣)332.重新安排行程Python

LeetCode332.重新安排行程 题目链接代码 题目链接 https://leetcode.cn/problems/reconstruct-itinerary/ 代码 class Solution:def backtracking(self, tickets, used, cur, result, path):if len(path) len(tickets) 1:result.append(path[:])return Truefor i, ticket…...

Pytho 从列表中创建字典 (dict.fromkeys()的问题)

问题起因&#xff1a;想在代码中通过已有的列表创建一个字典&#xff0c;但是又不想写循环&#xff0c;更不想手动填&#xff0c;所以用到了字典对象的fromkeys()方法 。 先以一个简单的例子介绍一下该方法&#xff1a; a ["A", "B", "C", &qu…...

第14节-PhotoShop基础课程-图框工具

文章目录 前言1.矩形画框2.椭圆画框 前言 图框 上面两张图&#xff0c;生成下面一幅图&#xff0c;这个就是图框工具的作用 图框工具ICON 1.矩形画框 2.椭圆画框...

使用 Nacos 在 Spring Boot 项目中实现服务注册与配置管理

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…...

package.json中workspaces详解与monorepo

参考package.json配置详解&#xff0c;让你一看就会&#xff08;下&#xff09; - 掘金...

Spring Boot + Vue的网上商城之商品信息展示

Spring Boot Vue的网上商城之商品信息展示 当实现一个Spring Boot Vue的网上商城的商品信息展示时&#xff0c;可以按照以下步骤进行&#xff1a; 后端实现&#xff1a; 创建一个Spring Boot项目&#xff0c;并添加所需的依赖&#xff0c;包括Spring Web和Spring Data JPA。…...

深度优先搜索遍历与广度优先搜索遍历

目录 一.深度优先搜索遍历 1.深度优先遍历的方法 2.采用邻接矩阵表示图的深度优先搜索遍历 3.非连通图的遍历 二.广度优先搜索遍历 1.广度优先搜索遍历的方法 2.非连通图的广度遍历 3.广度优先搜索遍历的实现 4.按广度优先非递归遍历连通图 一.深度优先搜索遍历 1.深…...

java 中 返回一个空Map

原文链接&#xff1a;Map用法总结 Constructs an empty HashMap with the default initial capacity (16) &#xff08;mutable&#xff09; // Constructs an empty HashMap with the default initial capacity (16) and the default load fact // Since:1.2 Map<String, …...

sql 执行插入多条语句中 n个insert 与 一个insert+多个values 性能上有和区别 -- chatGPT

在 SQL 中&#xff0c;你可以使用多种方式来插入多条记录。其中两种常见的方式是&#xff1a; 1. **多个 INSERT 语句**&#xff1a;每个 INSERT 语句都插入一行记录。 sql INSERT INTO table_name (column1, column2, ...) VALUES (value1_1, value1_2, ...); INSERT INTO …...

数学建模国赛C蔬菜类商品的自动定价与补货决策C

数学建模国赛C蔬菜类商品的自动定价与补货决策C 完整思路和代码请私信~~~ 1.拟解决问题 这是一个关于生鲜商超蔬菜商品管理的复杂问题&#xff0c;需要综合考虑销售、补货、定价等多个方面。以下是对这些问题的总结&#xff1a; 问题 1: 蔬菜销售分析 需要分析蔬菜各品类和…...

在程序开发中,接口(interface)的重要性

开了很多人写的程序&#xff0c;都适用了接口&#xff0c;也适用了注入&#xff0c;也没有感到什么不妥。如果只是为了注入而写接口&#xff0c;其实我感觉大可不必&#xff0c;特别是把接口和实体写在一个项目项目中的。 我不知道其他人怎么看接口这一层&#xff0c;接口最大的…...

MyBatis关联关系映射详解

前言 在使用MyBatis进行数据库操作时&#xff0c;关联关系映射是一个非常重要的概念。它允许我们在数据库表之间建立关联&#xff0c;并通过对象之间的关系来进行数据查询和操作。本文将详细介绍MyBatis中的关联关系映射&#xff0c;包括一对一、一对多和多对多关系的处理方法…...

常用电子元器件基础知识

目录 一、电阻 二、电容 三、电感 四、保险丝 五、二极管 一、电阻 概念&#xff1a;顾名思义&#xff0c;就是增加电流通过的阻力的。 就像是在水渠中放入东西&#xff0c;能阻止水的顺利通过也是一个道理。 基于电阻的电气特性&#xff0c;电阻在电路中主要有以下四个…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...