使用插件vue-seamless-scroll 完成内容持续动态

 

1、安装插件

npm install vue-seamless-scroll --save

2、项目中引入

 //单独引入import vueSeamlessScroll from 'vue-seamless-scroll'export default {components: { vueSeamlessScroll},}//或者在main.js引入import scroll from 'vue-seamless-scroll'Vue.use(scroll)

3、页面使用

   <vue-seamless-scroll :data="tableList" :speed="60" :class-option="Option" style="height: 100%;overflow: hidden;"><ul  slot="default" class="scroll-list" v-for="(item, index) in tableList" :key="index" @click="handlePoliceClick(item)"><li><img src="../../../assets/dataIcon/list.png" alt=""><span style="margin-left:15px;">{{ item.pushTypeName }}</span></li><li><span>报警区域:</span><span>{{ item.monitorName }}</span></li><li><span>报警时间:</span><span>{{ item.pushTime }}</span></li><li><span>处理状态:</span><span>{{ item.status == 0 ? '未处理' : '已处理' }}</span></li></ul></vue-seamless-scroll>
  computed: {Option() {//vue-seamless-scroll参数配置return {step: 0.2, // 数值越大速度滚动越快limitMoveNum:4, // 开始无缝滚动的数据量hoverStop: true, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) waitTime: 1000 // 单步运动停止的时间(默认值1000ms)}},},

 

  .table-list {height: calc(100% - 60px);margin-top: 10px;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/729866.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SRS服务器ffmpeg 推流rtmp超时中断

ffmpeg错误显示 failed to update header with correct duration failed to update header with correct filesize. Error writing trailer of rtmp://----- broken pipe SRS日志错误显示 serve error code2056 kickoffforidle : service cycle : rtmp stream service: timeou…

基于Pytorch搭建分布式训练环境

Pytorch系列 文章目录 Pytorch系列前言一、DDP是什么二、DPP原理terms、nodes 和 ranks等相关术语解读DDP 的局限性为什么要选择 DDP 而不是 DP代码演示1. 在一个单 GPU 的 Node 上进行训练&#xff08;baseline&#xff09;2. 在一个多 GPU 的 Node 上进行训练临门一脚&#x…

【深度学习笔记】稠密连接网络(DenseNet)

注&#xff1a;本文为《动手学深度学习》开源内容&#xff0c;部分标注了个人理解&#xff0c;仅为个人学习记录&#xff0c;无抄袭搬运意图 5.12 稠密连接网络&#xff08;DenseNet&#xff09; ResNet中的跨层连接设计引申出了数个后续工作。本节我们介绍其中的一个&#xf…

5个实用的PyCharm插件

大家好&#xff0c;本文向大家推荐五个顶级插件&#xff0c;帮助开发人员提升PyCharm工作流程&#xff0c;将生产力飞升到新高度。 1.CodiumAI 安装链接&#xff1a;https://plugins.jetbrains.com/plugin/21206-codiumate--code-test-and-review-with-confidence--by-codium…

Windows上基于名称快速定位文件和文件夹的免费工具Everything

在Windows上搜索文件时&#xff0c;使用windows上内置搜索会很慢&#xff0c;这里推荐使用Everything工具进行搜索。 "Everything"是Windows上一款搜索引擎&#xff0c;它能够基于文件名快速定位文件和文件夹位置。不像Windows内置搜索&#xff0c;"Everything&…

容器:Docker部署

docker 是容器&#xff0c;可以将项目的环境&#xff08;比如 java、nginx&#xff09;和项目的代码一起打包成镜像&#xff0c;所有同学都能下载镜像&#xff0c;更容易分发和移植。 再启动项目时&#xff0c;不需要敲一大堆命令&#xff0c;而是直接下载镜像、启动镜像就可以…

echarts x轴名称过长tip显示全称

xAxis的axisLabel的内容如下&#xff1a; axisLabel: { rotate: -45, color: document.body.className.indexOf(custom-f4c46d) > -1 ? #fff : #343434, // 显示省略号操作&#xff08;第一步&#xff09; formatter: function (value) { var val if (value.length >…

NTP协议介绍

知识改变命运&#xff0c;技术就是要分享&#xff0c;有问题随时联系&#xff0c;免费答疑&#xff0c;欢迎联系&#xff01; 网络时间协议NTP&#xff08;Network Time Protocol&#xff09;是TCP/IP协议族里面的一个应用层协议&#xff0c;用来使客户端和服务器之间进行时…

C while 循环

只要给定的条件为真&#xff0c;C 语言中的 while 循环语句会重复执行一个目标语句。 语法 C 语言中 while 循环的语法&#xff1a; while(condition) {statement(s); }在这里&#xff0c;statement(s) 可以是一个单独的语句&#xff0c;也可以是几个语句组成的代码块。 co…

IOS开发0基础入门UIkit-1cocoapod安装、更新和使用 , 安装中出现的错误及解决方案 M1或者M2安装cocoapods

cocoapod是ios开发时常用的包管理工具 1.M1或者是M2系统安装cocoapods先操作一下两个设置 1、打开访达->应用->实用工具->终端->右键点击终端->显示简介->勾选使用 Rosetta 打开&#xff0c;关闭终端&#xff0c;重新打开。 2、打开访达->应用->Xcod…

ApiPost设置预执行脚本获取token,并设置给请求头

ApiPost设置预执行脚本获取token&#xff0c;并设置给请求头 预执行脚本 这个地方获取字段为 {"msg": "操作成功","code": 200,"token": "eyJhbGciOixMiJ9.123-NQQPPKGr4Yxa1_H_JIrUXJQ" }修改head 里面参数

OpenAI劲敌吹新风! Claude 3正式发布,Claude3使用指南

Claude 3是什么&#xff1f; 是Anthropic 实验室近期推出的 Claude 3 大规模语言模型&#xff08;Large Language Model&#xff0c;LLM&#xff09;系列&#xff0c;代表了人工智能技术的一个显著飞跃。 该系列包括三个不同定位的子模型&#xff1a;Claude 3 Haiku、Claude 3…

BUUCTF-Misc3

LSB1 1.打开附件 得到一张图片&#xff0c;像是某个大学的校徽 2.Stegsolve工具 根据标题LSB&#xff0c;可能是LSB隐写 放到Stegsolve中&#xff0c;点Analyse在点Data Extract 数据提取 因为是LSB隐写&#xff0c;发现含以.png结尾的图片 3.保存图片 4.得到flag 扫描二维…

一招教你优化TCP提高大文件传输效率

在当今企业的数据传输实践中&#xff0c;传统的传输控制协议&#xff08;TCP&#xff09;在处理大型文件传输时&#xff0c;其固有的可靠性和复杂性有时会导致效率不足。为了提升大文件传输的效率&#xff0c;对TCP进行优化成为了一个关键任务。 TCP传输的可靠性是其核心优势&a…

UnityShader常用算法笔记(颜色叠加混合、RGB-HSV-HSL的转换、重映射、UV序列帧动画采样等,持续更新中)

一.颜色叠加混合 1.Blend混合 // 正常&#xff0c;透明度混合 Normal Blend SrcAlpha OneMinusSrcAlpha //柔和叠加 Soft Additive Blend OneMinusDstColor One //正片叠底 相乘 Multiply Blend DstColor Zero //两倍叠加 相加 2x Multiply Blend DstColor SrcColor //变暗…

聊聊 HTTP 性能优化

哈喽大家好&#xff0c;我是咸鱼。 作为用户的我们在 “上网冲浪” 的时候总是希望快一点&#xff0c;尤其是抢演唱会门票的时候&#xff0c;但是现实并非如此&#xff0c;有时候我们会遇到页面加载缓慢、响应延迟的情况。 而 HTTP 协议作为互联网世界的基础&#xff0c;从网…

穷人想赚钱该怎么选打工VS创业?2024年如何把握新机遇?

在贫穷的困境中&#xff0c;打工与创业似乎成为了两条截然不同的道路&#xff0c;摆在每一个渴望改变命运的人面前。然而&#xff0c;这并非简单的选择题&#xff0c;而是一场关于勇气、智慧与机遇的较量。打工&#xff0c;对于许多人来说&#xff0c;是稳定且相对安全的收入来…

Aigtek前置微小信号放大器有什么作用

前置微小信号放大器是一种被广泛应用于无线通信、雷达、射频等领域中的低噪声放大器。相较于传统的放大器&#xff0c;前置微小信号放大器具有更高的灵敏度和更低的噪声系数。下面安泰Aigtek将介绍前置微小信号放大器的作用和意义。 一、前置微小信号放大器的作用 放大弱信号 前…

C语言实现回调函数

C语言实现回调函数 一、回调函数概念1.1 什么叫函数指针 二、回调函数案例 一、回调函数概念 回调函数就是一个被作为参数传递的函数。在C语言中&#xff0c;回调函数只能使用函数指针实现&#xff0c;在C、Python、ECMAScript等更现代的编程语言中还可以使用仿函数或匿名函数…

IDEA启动项目读取nacos乱码导致启动失败

新安装的2023社区版IDEA,启动项目报错。 forest: interceptors: - com.gdsz.b2b.frontend.api.Interceptors.ApiInterceptor org.yaml.snakeyaml.error.YAMLException: java.nio.charset.MalformedInputException: Input length 1 at org.yaml.snakeyaml.reader.S…