vue可视化大屏怎么实现无线滚动列表飞入效果

今天小编给大家分享一下Vue可视化大屏怎么实现无线滚动列表飞入效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

一、效果如下

二、代码如下（因项目是vite与vue3.0、element-plus）

<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可视化大屏怎么实现无线滚动列表飞入效果”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。