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可視化大屏怎么實現無線滾動列表飛入效果”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。