vue可視化大屏實現(xiàn)無線滾動列表飛入效果

更新時間：2022年04月27日 08:27:54 作者：你說的誓言°變失言

本文主要介紹了vue可視化大屏實現(xiàn)無線滾動列表飛入效果，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、效果如下

二、代碼如下（因項目是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列表后處理數(shù)據(jù) 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>

到此這篇關(guān)于vue可視化大屏實現(xiàn)無線滾動列表飛入效果的文章就介紹到這了,更多相關(guān)vue 無線滾動列表飛入效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: