[JavaScript知识库] vue中无线滚动列表飞入效果（可视化大屏）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue中无线滚动列表飞入效果（可视化大屏） -> 正文阅读

[JavaScript知识库]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)" 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>