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;
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue 获取元素额外生成的data-v-xxx操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了element-ui中table表格的折叠和隐藏方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
nextTick是Vue提供的一个全局API，由于Vue的异步更新策略导致我们对数据的修改不会立刻体现，在DOM变化上，此时如果想要立即获取更新后的DOM状态，就需要使用这个方法，这篇文章主要介绍了解析VUE中nextTick,需要的朋友可以参考下2022-11-11
本篇文章主要介绍了在基于vue-cli的项目自定义打包环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
Vue项目中Element UI组件未注册的问题原因及解决方法
在 Vue 项目中使用 Element UI 组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题的原因、解决方法,以及如何在需要时撤销相关操作,需要的朋友可以参考下2025-01-01
Vuex是一个Vue的状态管理工具,状态就是数据,用大白话来说就是Vuex是一个插件,可以帮我们管理Vue通用的数据,这篇文章主要介绍了彻底搞懂vuex的相关资料,需要的朋友可以参考下2026-03-03
在本教程中，我们将探讨如何在浏览器中使用 JavaScript 库来操作图片，为服务器上的存储做准备，并在 Web 程序中使用。我们将使用 Vue.js 而不是原生 JavaScript来完成此操作,需要的朋友可以参考下2019-06-06
这篇文章主要为大家详细介绍了vue-resourse将json数据输出实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了Vue下拉框值变动事件传多个参数方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
vue tab切换,解决echartst图表宽度只有100px的问题
这篇文章主要介绍了vue tab切换,解决echartst图表宽度只有100px的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论