今天小编给大家分享一下vue可视化大屏怎么实现无线滚动列表飞入效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
计算
安全
数据库
网络和加速
企业服务
<template>
<ul class="IncidentMediateUl clearfix" v-infinite-scroll="infiniteScroll" :infinite-scroll-disabled="Data.disabled" >
<li v-for="(item, index) in Data.IncidentData" :key="index" class="IncidentMediateli clearfix" @click="Details(item)" :>
<img :src="getImageUrl(item.status)" alt="" />
<div class="Mediate">
<el-tooltip class="item" effect="light" popper-class="tooltipLight" :content="item.name" placement="top">
<p class="headline">{{ item.name }}</p>
</el-tooltip>
<p class="time">{{ item.reportTime }}</p>
<p class="location">{{ item.eventLocation }}</p>
</div>
</li>
</ul>
</template>
<script setup>
const cssIndex = ref(0)
const 列表方法 =()=>{
// 获取到list列表后处理数据 res.data 与Data.IncidentData 均为列表
cssIndex.value = 0
res.data.forEach((item, index) => {
if (Data.IncidentData.length === 0 || Data.IncidentData.length < index) {
cssIndex.value += 1
item.style = {
animationDelay: `${cssIndex.value * 0.3}s` // 加载动画
}
} else {
item.style = {
animationDelay: `0s` // 如果滚动将以前动画置为0
}
}
})
Data.IncidentData = res.data
}
</script>
<style lang="scss" scoped>
.IncidentMediateli {
transform: translateX(100%);
animation: rise-in 1s forwards;
@keyframes rise-in {
to {
transform: translateX(0);
}
}
}
</style>以上就是“vue可视化大屏怎么实现无线滚动列表飞入效果”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
