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

一、效果如下

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

<template>
 <ul class="IncidentMediateUl clearfix" v-infinite-scroll="infiniteScroll" :infinite-scroll-disabled="Data.disabled" style="overflow: auto">
     <li v-for="(item, index) in Data.IncidentData" :key="index" class="IncidentMediateli clearfix" @click="Details(item)" :style="item.style">
      <img :src="getImageUrl(item.status)"  />
      <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可视化大屏实现无线滚动列表飞入效果的文章就介绍到这了,更多相关vue 无线滚动列表飞入 效果内容请搜索源码搜藏网以前的文章或继续浏览下面的相关文章希望大家以后多多支持源码搜藏网！