当前位置: 首页 > news >正文

vue实现列表自动滚动效果

效果如图:

1.下载插件

npm install vue-seamless-scroll --save

 2.在main.js中引入注册

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

3.在页面中使用(写一个固定的表头 el-table:show-header="status" 设置为false,自带的表头不显示)

 <div class="table-box">//静态表头<div class="toptitle"><div class="item">序号</div><div class="item">检测点</div><div class="item">时间</div><div class="item">识别项</div><div class="item">结果</div></div>//滚动组件<vue-seamless-scroll :data="tableData" :class-option="optionHover" class="seamless-warp"><el-table :data="tableData" @row-click="showRowDetail" style="width: 100%"  :show-header="status":row-class-name="tableRowClassName"><el-table-column type="index" label="序号" width="50"></el-table-column><el-table-column prop="siteName" label="检测点"><template slot-scope="scope"><span>{{ scope.row.siteName ? scope.row.siteName : '---' }}</span></template></el-table-column><el-table-column prop="ts" label="时间"><template slot-scope="scope"><span>{{ scope.row.ts ? scope.row.ts : '---' }}</span></template></el-table-column><el-table-column prop="fun" label="识别项"><template slot-scope="scope"><span>{{ scope.row.fun == "valve" ? '炉门' : scope.row.fun == "rod" ? '摆臂' : '---' }}</span></template></el-table-column><el-table-column prop="err" label="结果"><template slot-scope="scope"><span>{{ scope.row.err === 0 ? '正常' : scope.row.err === 1 ? '异常' : '---' }}</span></template></el-table-column></el-table></vue-seamless-scroll></div>

4.js配置滚动插件配置对象

 computed: {optionHover() {return {step: 1, // 数值越大速度滚动越快limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.lengthhoverStop: true, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 20, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 1000, // 单步运动停止的时间(默认值1000ms)};},}

3.效果图样式

<style lang="scss" scoped>
.right-box {height: 36%;.table-box {height: 85.2%;background: #051f51;}}.seamless-warp {height: 200px;overflow: hidden;
}/deep/ .el-table {background: transparent !important;
}
//隔行换色
/deep/ .el-table .even-row td {background-color: #082959 !important;color: #47e2ff;
}/deep/ .el-table .odd-row td {background-color: #051f51 !important;color: #47e2ff;
}/deep/.el-table td,
/deep/.el-table th.is-leaf {border: none;
}/deep/.el-table--border::after,
/deep/.el-table--group::after,
/deep/.el-table::before {background-color: transparent !important;
}/deep/.el-table .cell {text-align: center;
}
//设置固定表头样式,保证滚动时候表头固定不动
.toptitle {width: 100%;display: flex;.item {width: 20%;text-align: center;color: #fff;background: #093376;padding: 10px;}
}
</style>

相关文章:

vue实现列表自动滚动效果

效果如图&#xff1a; 1.下载插件 npm install vue-seamless-scroll --save 2.在main.js中引入注册 import scroll from vue-seamless-scroll Vue.use(scroll) 3.在页面中使用&#xff08;写一个固定的表头 el-table:show-header"status" 设置为false,自带的表头不…...

如何通过构建遥感光谱反射信号与地表参数之间的关系模型来准确估算植被参数?植被参数光学遥感反演方法(Python)及遥感与生态模型数据同化算法

目录 专题一 植被参数遥感反演理论 专题二 植被叶片及冠层反射率模拟与处理 专题三 植被遥感模型参数敏感性分析 专题四 基于查找表(LUT)方法反演植被参数 专题五 基于优化算法反演植被参数 专题六 基于机器学习反演植被参数 专题七 遥感数据同化理论 专题八 同化遥感反…...

持续集成与持续交付(CI/CD):探讨在云计算中实现快速软件交付的最佳实践

文章目录 持续集成&#xff08;CI&#xff09;的最佳实践持续交付&#xff08;CD&#xff09;的最佳实践云计算环境下的特别注意事项 &#x1f388;个人主页&#xff1a;程序员 小侯 &#x1f390;CSDN新晋作者 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 ✨收录专栏&am…...

【LeetCode题目详解】第九章 动态规划part02 62.不同路径 63. 不同路径 II day39补

本文章代码以c为例&#xff01; 一、力扣第62题&#xff1a;不同路径 题目&#xff1a; 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;…...

四维轻云助力在线管理、展示及分享多种地理空间数据

《四维轻云》是一款轻量化的地理空间数据管理云平台&#xff0c;支持倾斜摄影模型、激光点云、数字高程模型及正射影像等多种地理空间数据的在线管理、展示及分享。目前&#xff0c;平台有项目管理、数据上传、场景搭建、发布分享、素材库等功能模块&#xff0c;支持多人在线协…...

CMake 学习笔记

一直想了解CMake&#xff0c;但是不知从何入门。最近看了CMake 官方的Tutorial&#xff0c;感觉的确很适合入门。 首先要安装CMake, 安装步骤: 直接去下载最新版Download | CMakemacos 点开CMake 后&#xff0c;遵循“How to Install For Command Line Use” 菜单项&#xff0…...

docker高级(DockerFile解析)

1、构建三步骤 编写Dockerfile文件 docker build命令构建镜像 docker run依镜像运行容器实例 2、DockerFile构建过程解析 Dockerfile内容基础知识 1&#xff1a;每条保留字指令都必须为大写字母且后面要跟随至少一个参数 2&#xff1a;指令按照从上到下&#xff0c;顺序执行…...

抽象类实现接口的意义

文章目录 前言一、抽象类和接口对比二、举例说明三种情况1.接口实现类接口 2.抽象类实现类抽象类实现类(子类) 3.抽象类实现接口接口抽象类三个实现类 总结 前言 抽象类和接口其实都是抽象的一种,那么他俩有何异同呢? 抽象类实现接口的意义何在? 一、抽象类和接口对比 接口…...

什么是接口测试,如何做接口测试?

比起点点点的功能测试&#xff0c;“接口测试”显得专业又高大上&#xff0c;也因此让有些初级测试人员“望而生畏”。别担心&#xff0c;其实接口测试也是功能测试的一种&#xff0c;它是针对接口进行的功能测试。 写在前面&#xff1a;本文参考了茹炳晟老师的《测试工程师 全…...

Keil 编译 Debug

# 头文件无法导入进来 # 导入头文件&#xff0c;只有函数声明&#xff0c;但缺少函数实现 已经导入了air32f10x_gpio.h但是没有导入 .c&#xff0c;就导致 编译出错出现undefined symbol (某个函数)&#xff0c;这时候按照下面的操作&#xff0c;导入外设模块就好。...

【通用消息通知服务】0x3 - 发送我们第一条消息(Websocket)

【通用消息通知服务】0x3 - 发送我们第一条消息 项目地址: A generic message notification system[Github] 实现接收/发送Websocket消息 Websocket Connection Pool import asyncio from asyncio.queues import Queue from asyncio.queues import QueueEmpty from contextli…...

Eclipse打jar包与JavaDOC文档的生成

补充知识点——Eclipse打jar包与JavaDOC文档的生成 1、Eclipse如何打jar包&#xff0c;如何运行jar包 Java当中编写的Java代码&#xff0c;Java类、方法、接口这些东西就是项目中相关内容&#xff0c;到时候我们需要把代码提供给甲方、或者是我们需要运行我们编写的代码&…...

力扣:80. 删除有序数组中的重复项 II(Python3)

题目&#xff1a; 给你一个有序数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使得出现次数超过两次的元素只出现两次 &#xff0c;返回删除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须在 原地 修改输入数组 并在使用 O(1) 额外空间的条件下…...

linux:需要注意docker和aws的rds的mysql默认是UTC而不是中国时区

问题&#xff1a; 如题 解决办法&#xff1a; docker参考&#xff1a; mysql时间不对&#xff0c;修改时区_set global time_zone 无效_《小书生》的博客-CSDN博客 aws参考&#xff1a; https://www.youtube.com/watch?vB-NaqV-A1BY mysql - AWS修改RDS时区 - 个人文章 - Segm…...

访问 GitHub 方法

访问 GitHub 方法 方法一&#xff1a;最常见的就是 fq&#xff0c;但这个是违法的行为&#xff0c;自己私下搞可以&#xff0c;不能教你们。 方法二&#xff1a;利用加速器&#xff0c;这是正规合法操作。这里推荐一个免费的加速器&#xff0c;下载安装 Watt Toolkit加速器,原名…...

旅游APP外包开发注意事项

旅游类APP通常具有多种功能&#xff0c;以提供给用户更好的旅行体验。以下分享常见的旅游类APP功能以及在开发和使用这些APP时需要注意的问题&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 常见功能…...

ROS机器人编程---------(二)ROS中的核心概念

ROS机器人编程 ROS中的核心概念 ROS的通信机制 在ROS中结点是最小单元&#xff0c;比如说机器人的遥控器可以作为一个控制结点&#xff0c;机器人上的摄像头也可以看作一个结点&#xff0c;ROS通过协调各个结点来实现 在启动任何ROS结点之前&#xff0c;都必须先启动ROS Mas…...

Python学习教程:进程的调度

前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 要想多个进程交替运行&#xff0c;操作系统必须对这些进程进行调度&#xff0c; 这个调度也不是随即进行的&#xff0c;而是需要遵循一定的法则&#xff0c;由此就有了进程的调度算法。 python更多源码/资料/解答/教程等 …...

ElasticSearch第三讲:ES详解 - Elastic Stack生态和场景方案

ElasticSearch第三讲&#xff1a;ES详解 - Elastic Stack生态和场景方案 本文是ElasticSearch第三讲&#xff0c;在了解ElaticSearch之后&#xff0c;我们还要了解Elastic背后的生态 即我们常说的ELK&#xff1b;与此同时&#xff0c;还会给你展示ElasticSearch的案例场景&…...

基于Java+SpringBoot+Vue前后端分离农商对接系统设计和实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…...

【模方ModelFun】实景三维建模和修模4.0.7最新版安装包以及图文安装教程

模方ModelFun 具有多种功能&#xff0c;旨在帮助用户进行实景三维建模和修模。以下是一些主要功能的简要介绍&#xff1a; 实景三维建模&#xff1a;【模方ModelFun】提供了自动化的实景三维重建功能&#xff0c;可以从实景图像中提取几何形状和纹理信息&#xff0c;生成高质量…...

介绍几个搜索引擎

Google&#xff1a;全球最大的搜索引擎&#xff0c;提供全面的搜索服务&#xff0c;包括网页、图片、视频、新闻、地图等。 Baidu&#xff1a;中国最大的搜索引擎&#xff0c;提供类似于Google的全面搜索服务&#xff0c;同时也有网盘、知道等功能。 Bing&#xff1a;微软公司…...

iPhone 隔空投送使用指南:详细教程

本文介绍了如何在iPhone上使用隔空投送,包括如何在iOS 11到iOS 14的iPhone上启用它、发送文件以及接受或拒绝AirDrop发送给你的文件。对于iOS 7以上的旧款iPhone,提供了另一种方法。 如何打开隔空投送 你可以通过以下两种方式之一启动隔空投送功能:在“设置”应用程序或控…...

百度文心一言GPT免费入口也来了!!!

文心一言入口地址&#xff1a;文心一言能力全面开放 文心一言是百度全新一代知识增强大语言模型&#xff0c;文心大模型家族的新成员&#xff0c;能够与人对话互动&#xff0c;回答问题&#xff0c;协助创作&#xff0c;高效便捷地帮助人们获取信息、知识和灵感。 文心一言的技…...

线程调度和线程控制

在Java中,线程调度和线程控制是多线程编程中重要的概念,它们用于管理和控制线程的执行。以下是关于线程调度和线程控制的一些重要概念和技术: **1. 线程调度(Thread Scheduling): ** 线程调度是操作系统或Java虚拟机决定哪个线程在何时执行的过程。Java提供了多种线程调度…...

laravel excel导入导出

一、安装第三方 composer require maatwebsite/excel版本2.1和现在版本 有所不一样 二、导入 <?php namespace App\Import; use Maatwebsite\Excel\Concerns\ToCollection;class TestImport implements ToCollection {public function __construct(){}public function c…...

Windows无法删除分区怎么办?

我们知道Windows系统内置的磁盘管理工具是一个很实用的程序&#xff0c;可以帮助我们完成很多磁盘分区相关的基础操作&#xff0c;比如当我们想要删除硬盘上的某一个分区时&#xff0c;先想到的可能会是磁盘管理工具。但是当我们准备在磁盘管理工具中删除某个分区时&#xff0c…...

【请求报错:javax.net.ssl.SSLHandshakeException: No appropriate protocol】

1、问题描述 在请求服务时报错说SSL握手异常协议禁用啥的&#xff0c;而且我的连接数据库的url也加了useSSLfalse javax.net.ssl.SSLHandshakeException: No appropriate protocol (protocol is disabled or cipher suites are inappropriate)2、解决方法 在网上查找了方法…...

elementUI textarea可自适应文本高度的文本域

效果图; 通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整&#xff0c;并且 autosize 还可以设定为一个对象&#xff0c;指定最小行数和最大行数。 <el-inputtype"textarea"autosizeplaceholder"请输入内容"v-model"te…...

WebRTC-Streamer交叉编译

WebRTC-Streamer交叉编译 flyfish 文章目录 WebRTC-Streamer交叉编译零、前言一、提前准备工作1 安装需要的工具2 可选的交叉编译工具3 默认执行python是python34 获取源码5 使用其他版本的方法 二、非交叉编译编译1 在 src目录执行 安装所需的依赖2 执行命令 三、 交叉编译1 …...