vue3卡片垂直无限滚动方式
更新时间：2025年07月29日 09:33:17 作者：riyue666
使用CSS动画实现DOM向上滚动,JS动态计算数据条数并实时调整滚动速度,确保在onMounted中调用以正确渲染DOM
vue3卡片垂直无限滚动
主要是利用css动画向上滚动，js动态计算dom上有多少条数据实时更新滚动速度
dom
<div class="temp_info">
<div class="scroll-wrapper">
<div class="scroll-content">
<div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来1小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
<div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
<div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
<div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
<div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
<div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
<div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
<div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
<div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
<div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
<div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
<div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
<div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
<div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
<div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
<div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div>
</div>
</div>
</div>js要在onMounted里调用确保dom已经被渲染
onMounted(()=>{
// 计算滚动速度的函数
const calculateScrollSpeed = () => {
const scrollContent = document.querySelector('.scroll-content')
const tempInfo = document.querySelector('.temp_info')
if (scrollContent && tempInfo) {
// 获取所有预警项目
const warnItems = scrollContent.querySelectorAll('.warnItem')
const itemCount = warnItems.length
// 计算实际需要滚动的行数（考虑重复内容）
const visibleHeight = tempInfo.clientHeight
const itemHeight = 30 // 每个项目的高度
const visibleItems = Math.ceil(visibleHeight / itemHeight)
const actualScrollItems = itemCount - visibleItems
// 计算滚动时间：每个项目1.5秒，确保匀速且不会太快
const scrollDuration = Math.max(actualScrollItems * 1.5, 10) // 最少10秒
// 设置CSS变量
scrollContent.style.setProperty('--scroll-duration', `${scrollDuration}s`)
console.log('预警项目数量:', itemCount, '可见项目:', visibleItems, '滚动时间:', scrollDuration + 's')
}
}
// 动态计算滚动速度，确保匀速滚动
setTimeout(calculateScrollSpeed, 1000)
// 监听窗口大小变化，重新计算滚动速度
window.addEventListener('resize', calculateScrollSpeed)
})css
.temp_info {
box-sizing: border-box;
width: 100%;
height: 60px;
background: rgba(1, 60, 93, 0.36);
border-radius: 3px;
border: 1px solid #1a3f58;
padding-left: 15px;
padding-right: 10px;
overflow: hidden;
position: relative;
// 添加渐变遮罩
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background: linear-gradient(to bottom, rgba(1, 60, 93, 0.8) 0%, transparent 15%, transparent 85%, rgba(1, 60, 93, 0.8) 100%);
pointer-events: none;
z-index: 2;
}
.scroll-wrapper {
height: 100%;
overflow: hidden;
}
.scroll-content {
// 使用CSS变量控制滚动速度，默认20秒
animation: scrollUp var(--scroll-duration, 20s) linear infinite;
will-change: transform;
position: relative;
z-index: 1;
&:hover {
animation-play-state: paused;
}
}
.warnItem {
display: flex;
justify-content: space-between;
line-height: 30px;
.textcol {
font-weight: 400;
font-size: 14px;
color: #7dbaed;
}
.quan {
display: inline-block;
width: 7px;
height: 7px;
background: rgba(34, 186, 255, 0.36);
border-radius: 50%;
border: 1px solid #22baff;
margin-right: 6px;
}
.timecol {
font-weight: 400;
font-size: 14px;
color: #a3e5ff;
}
}
}
@keyframes scrollUp {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}
// 确保动画能够正常工作
.scroll-content {
will-change: transform;
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天想要给vite项目,添加全局的scss变量文件引用,这样我们在使用scss变量和函数的时候就不需要每个组件都取引用了,下面这篇文章主要给大家介绍了关于如何在vite初始化项目中安装scss以及scss使用的相关资料,需要的朋友可以参考下2022-10-10
Nuxt.js是一个基于Vue.js的框架,结合Serverless架构,Nuxt.js可以让你构建高度可扩展、成本效益高的无服务器应用,具有一定的参考价值,感兴趣的可以了解一下2024-08-08
这篇文章主要为大家详细介绍了vue+echarts实现进度条式柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
日历在很多地方都可以使用的到，本文主要介绍了vue3日历控件的具体实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
sass是css的预处理器,扩展了css语言,提供了规则、变量、混入、选择器、继承、内置函数等特性,有助于减少CSS重复的代码,节省开发时间,下面这篇文章主要给大家介绍了关于vue3安装配置sass的相关资料,需要的朋友可以参考下2022-12-12
Element DateTimePicker日期时间选择器的使用示例
这篇文章主要介绍了Element DateTimePicker日期时间选择器的使用示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
今天小编就为大家分享一篇vue 本地环境跨域请求proxyTable的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了使用vue-aplayer插件时出现的问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家详细介绍了vue悬浮表单复合组件开发，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了Vue多条件筛选功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
最新评论