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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在Vue3中,onUnmounted是一個生命周期鉤子,它會在組件實例被卸載（unmounted）和銷毀之前被調(diào)用,本文給大家介紹vue3中onUnmounted使用詳解,感興趣的朋友跟隨小編一起看看吧2024-03-03
vue腳手架創(chuàng)建項目時報catch錯誤及解決
這篇文章主要介紹了vue腳手架創(chuàng)建項目時報catch錯誤及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue 路由視圖 router-view嵌套跳轉(zhuǎn)的實現(xiàn)
這篇文章主要介紹了vue 路由視圖 router-view嵌套跳轉(zhuǎn)，主要實現(xiàn)的內(nèi)容有制作一個登錄頁面，跳轉(zhuǎn)到首頁，首頁包含菜單欄、頂部導(dǎo)航欄、主體，標(biāo)準(zhǔn)的后臺網(wǎng)頁格式，菜單點擊顯示不同的頁面，感興趣的小伙伴請參考下面文章內(nèi)容2021-09-09
這篇文章主要為大家詳細(xì)介紹了vue項目實現(xiàn)面包屑導(dǎo)航，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
下面小編就為大家分享一篇完美解決axios跨域請求出錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家介紹了Vue生命周期中的八個鉤子函數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
vue3中unplugin-auto-import自動引入示例代碼
unplugin-auto-import 這個插件是為了解決在開發(fā)中的導(dǎo)入問題,下面這篇文章主要給大家介紹了關(guān)于vue3中unplugin-auto-import自動引入的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)tab欄切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了Vue3-pinia狀態(tài)管理,pinia是?vue3?新的狀態(tài)管理工具，簡單來說相當(dāng)于之前?vuex，它去掉了?Mutations?但是也是支持?vue2?的，需要的朋友可以參考下2022-08-08
Vue2?Observer實例dep和閉包中dep區(qū)別詳解
這篇文章主要為大家介紹了Vue2?Observer實例dep和閉包中dep區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10