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

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

一、效果如下

二、代码如下（因项目是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>

到此这篇关于vue可视化大屏实现无线滚动列表飞入效果的文章就介绍到这了,更多相关vue 无线滚动列表飞入 效果内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue实现商品飞入购物车效果(电商项目)

    各位掘友,好久不见,最近利用工作之余开源了Vue电商项目,高仿某知名O2O买菜平台,整个项目做下来收获还是蛮多的,可以扫描下方二维码体验,本篇是项目的核心知识拆解篇,主要是拆解增加商品飞入购物车的实现过程. 点我体验 项目开源地址 感谢点星+收藏 首先我先简单的介绍下本项目所用到的技术栈: 整个项目采用 vue-cli3 脚手架搭建, Vue全家桶(vue.vuex.vue-router) . Vant UI框架 以及很多著名好用的第三方库如: axios . fastclick . bette

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

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

    目录 一.效果如下 二.代码如下(因项目是vite与vue3.0.element-plus) 一.效果如下 二.代码如下(因项目是vite与vue3.0.element-plus) <template>    <ul class="IncidentMediateUl clearfix" v-infinite-scroll="infiniteScroll" :infinite-scroll-disabled="Data.disabled&q

  • 基于vue+echarts数据可视化大屏展示的实现

    基于vue+echarts数据可视化大屏展示的实现

    获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也可以直接下载完整版本:开发环境建议下载源代码版本,包含了常见的错误提示和警告. 2) 也可以在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 3) 或者通过 npm 获取 echarts,npm

  • 基于vue+echarts 数据可视化大屏展示的方法示例

    基于vue+echarts 数据可视化大屏展示的方法示例

    获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也可以直接下载完整版本:开发环境建议下载源代码版本,包含了常见的错误提示和警告. 2) 也可以在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 3) 或者通过 npm 获取 echarts,npm

  • 基于Python Dash库制作酷炫的可视化大屏

    基于Python Dash库制作酷炫的可视化大屏

    目录 介绍 数据 大屏搭建 介绍 大家好,我是小F- 在数据时代,我们每个人既是数据的生产者,也是数据的使用者,然而初次获取和存储的原始数据杂乱无章.信息冗余.价值较低. 要想数据达到生动有趣.让人一目了然.豁然开朗的效果,就需要借助数据可视化. 以前给大家介绍过使用Streamlit库制作大屏,今天给大家带来一个新方法. 通过Python的Dash库,来制作一个酷炫的可视化大屏! 先来看一下整体效果,好像还不错哦. 主要使用Python的Dash库.Plotly库.Requests库. 其中R

  • 推荐四款可视化工具(解决99%的可视化大屏需求)

    推荐四款可视化工具(解决99%的可视化大屏需求)

    小编最经常的工作是将一些项目的数据从数据库导出,然后分门别类的列到excel表格中,领导看起来眼花缭乱. 小编想,要是能以图表可视化展现出来,领导就可以看到项目近几个月的走势,也知道之后要怎么决策了.小编尝试了使用excel制作图表,由于操作复杂,小编放弃了,于是小编在网上找到了以下四种可视化工具,现在我们来看一下: 1. 阿里云DataV 使用手机号或邮箱注册账号,会获得7天的体验期.阿里云DataV有强大的组件库,可以制作不同的样式,还可以链接数据库或API接口,炫酷的可视化大屏可以轻松完成

  • Python机器学习之使用Pyecharts制作可视化大屏

    Python机器学习之使用Pyecharts制作可视化大屏

    目录 前言 Pyecharts可视化 Map世界地图 柱状图.饼图 Pyecharts组合图表 总结 前言 ECharts是由百度开源的基于JS的商业级数据图表库,有很多现成的图表类型和实例,而Pyecharts则是为了方便我们使用Python实现ECharts的绘图.使用Pyecharts制作可视化大屏,可以分为两步: 1.使用分别Pyecharts分别制作各类图形: 2.使用Pyecharts中的组合图表功能,将所有图片拼接在一张html文件中进行展示. 小五认为影响大屏美观最重要的两个因素

  • Vue实现大屏页面的屏幕自适应

    本文实例为大家分享了Vue实现大屏页面的屏幕自适应的具体代码,供大家参考,具体内容如下 1. 在配置文件设置大屏设计的尺寸1920*1080 //appConfig.js export default{ screen:{ width:1920, height:1080, scale:20 }//大屏设计宽高 } 2. 定义resetScreenSize.js import appConfig from '../config/base' export function pageResize(cal

  • python可视化大屏库big_screen示例详解

    python可视化大屏库big_screen示例详解

    目录 big_screen 特点 安装环境 输入数据 本地运行 在线部署 对于从事数据领域的小伙伴来说,当需要阐述自己观点.展示项目成果时,我们需要在最短时间内让别人知道你的想法.我相信单调乏味的语言很难让别人快速理解.最直接有效的方式就是将数据如上图所示这样,进行可视化展现. 具体如下: big_screen 特点 便利性工具, 结构简单, 你只需传数据就可以实现数据大屏展示. 安装环境 pip install -i https://pypi.tuna.tsinghua.edu.cn/simp

  • Python 轻松实现可视化大屏

    Python 轻松实现可视化大屏

    提到数据可视化,我们会想到 Plotly.Matplotlib.Pyecharts等可视化库,或者一些商用软件Tableau.FineBI等等.如果你希望操作更简单.展现效果更强大,那么这款工具 big_screen 更适合你了. 本文介绍具体如下: big_screen 特点 安装环境 输入数据 结果展示 在线部署 代码领取 big_screen 特点 便利性工具, 结构简单, 你只需传数据就可以实现数据大屏展示. 安装环境 pip install -i https://pypi.tuna.t

  • 利用python实现可视化大屏

    利用python实现可视化大屏

    目录 1.实践之轨迹地图 2.最终制作出来的效果图 3.大屏的由来 下文要实现的可视化大屏内容:需要在地图上将我司船舶的轨迹展示出来.听起来很简单,一开始我也是这样想的.通过一些BI工具应该可以轻松实现,比如这样的: 仔细观察可以看到,这种轨迹是两点之前的弧线,适合用来展示航空的航线或者起点终点方向类型轨迹,而加载了插件后发现,其功能是无法支持船舶轨迹的数据的,所以该插件被pass掉了. 百度已经无法找到合适的资源了,于是我又转向了微信公众号搜索,我发现了folium这个地图可视化的库.它的可视

随机推荐