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

vue 基于vue-seamless-scroll无缝滚动的用法和遇到的问题解决

vue 基于vue-seamless-scroll无缝滚动的用法和遇到的问题解决

背景

最近再做一个大屏项目,需要用到表格滚动效果,之前自己写过js实现,最近发现一个组件vue-seamless-scroll可以实现滚动,感觉挺方便的,准备用一下,但是用完之后才发现这个组件有很多坑需要解决.我把用法和一些问题的解决方法记录一下.

需求

实现表格滚动效果,表格中过长的是文字需要悬停展示,点击每行弹出详情弹框,数据每分钟更新一次.

安装vue-seamless-scroll

npm install vue-seamless-scroll --save  

引入组件

<vue-seamless-scroll></vue-seamless-scroll>import vueSeamlessScroll from 'vue-seamless-scroll'components: {vueSeamlessScroll
}, 

配置参数

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

上边的安装使用很简单,大家可以官方文档看看.
刚开始我还觉得这个组件很好用,可是后来现实改变了我的想法.

遇到的问题

我把项目代码放上,便于下边问题描述,这是最终代码

html
<div class="table_box"><div class="heared"><div:class="item.className"v-for="(item,index) in headerList":key="index":style="'width:'+item.width+'px'">{{item.title}}</div></div><div class="scrollBox" @click="clickHang($event)"><div ref="vc-tooltip" style="position: absolute;display: none" class="tooltip-box"></div><vue-seamless-scroll@mouseover.native="handleMouseover($event)"@mouseout.native="handleMouseout($event)":data="tableData":class-option="classOption"class="warp"@ScrollEnd="scrollEndEvent"v-if="scrollFlag"><div class="tableCont" ref="tableCont"><div class="hangBox" v-for="(item,index) in tableData" :key="index" :data-obj="JSON.stringify(item)"><div class="hang"><div class="caseLevel"><span class="table-content" :data-obj="JSON.stringify(item)">{{item.caseLevel}}</span></div><div class="caseType"><span :data-obj="JSON.stringify(item)">{{getCaseType(item.caseType)}}</span></div><div class="receiveCaseTime"><span :data-obj="JSON.stringify(item)">{{formatDate(item.receiveCaseTime)}}</span></div><div class="caseSummary"><span class="table-content" :data-obj="JSON.stringify(item)">{{item.caseSummary}}</span></div></div></div></div></vue-seamless-scroll></div></div>
js
data() {return {headerList: [{ id: 1, title: '级别', className: 'caseLevel', width: 60 },{ id: 2, title: '类型', className: 'caseType', width: 100 },{ id: 3, title: '时间', className: 'receiveCaseTime', width: 100 },{ id: 4, title: '概要', className: 'caseSummary', width: 130 }],classOption: {direction: 1, //滚动方向step: 0.5, //滚动速度  越打越快singleHeight: 28, //滚动距离limitMoveNum: 6},}},
...
clickHang($event) {if ($event.target.dataset) {const item = JSON.parse($event.target.dataset.obj)console.log(item )//去打开弹框}},handleMouseover(el) {//判断el是否在content的`<td>`标签上if (el.target.className.includes('table-content')) {el.target.style.cursor = 'pointer'//el所在div的transform在y轴上的移动pxlet h = parseFloat(this.$refs['tableCont'].parentElement.parentElement.style.transform.replaceAll('translate(0px,', '').replace('px)', ''))//显示divthis.$refs['vc-tooltip'].style.display = ''this.$refs['vc-tooltip'].innerHTML = el.target.innerHTMLthis.$refs['vc-tooltip'].style.left = el.target.offsetLeft - this.$refs['vc-tooltip'].offsetWidth / 2 + 'px'//判断el所在的div后面是否有元素,有则为第一个div// if (el.target.parentElement.parentElement.parentElement.nextSibling != null) {this.$refs['vc-tooltip'].style.top = el.target.offsetTop + h - 10 + 'px'// } else {//   //当el所在div为第二个即最后一个,弹窗的top还需加上上一个div的高度//   this.$refs['vc-tooltip'].style.top =//     el.target.offsetTop + h + this.$refs['tableCont'].offsetHeight - 10 + 'px'// }}},handleMouseout(el) {if (el.target.className.includes('table-content')) {this.$refs['vc-tooltip'].style.display = 'none'}},

css

.table_box {margin: 5px;text-align: center;position: relative;.heared {display: flex;height: 21px;line-height: 21px;align-items: center;justify-content: space-between;background-color: rgba(6, 90, 254, 0.8);& > div {margin-left: 5px;font-family: Noto Sans SC;font-size: 16px;font-weight: 700;color: #fccd1d;}}.scrollBox {.tooltip-box {z-index: 5;background: #303133;color: #fff;padding: 10px;line-height: 1.2;min-width: 10px;word-wrap: break-word;border-radius: 4px;font-size: 12px;}}.warp {height: 146px;overflow: hidden;// margin: 10px 0;}.tableCont {.hangBox {height: 27px;pointer-events: all;padding-top: 1px;}.hang {display: flex;align-items: center;justify-content: space-between;margin-top: 9px;height: 18px;line-height: 18px;font-style: normal;font-size: 16px;color: #ffffff;background-color: rgba(6, 90, 254, 0.5);font-family: Noto Sans SC;pointer-events: none;& > div {margin-left: 5px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;.table-content {pointer-events: all;}}.caseLevel {width: 60px;}.receiveCaseTime {width: 100px;}.caseType {width: 100px;}.caseSummary {width: 130px;}}}}
1.每一行挂载点击事件

开始的思路是在表格行上添加@click事件就行了,这种方式不可行,发现有的行点击事件挂载不上,后来看了看,明白了大概原因,
由于插件为了实现无缝滚动的效果会把表格html部分复制一份,用于滚动的衔接,但是复制的部分不会挂载点击事件.

解决方法

思路:在每一行中添加属性值, :data-obj=“JSON.stringify(item)”,再通过外层的点击事件clickHang,获取目标元素的属性值.

这里还会引发一个问题的是:
如果每一行中的元素结构比较复杂,:data-obj="JSON.stringify(item)"挂载的位置需要考虑一下,如果挂错地方了,外层点击事件获取不到属性值.
这里我使用css属性把hangBox中hang属性pointer-events: none;然后把hangBox元素设置pointer-events: all;目的就是只留下hangbox的触发事件,内部元素就不会影响了.

2.表格中每一行过长,悬停提示

开始思路是直接用elementui中组件el-tooltip实现,但是又遇到问题了,还是上边的问题,插件把表格html部分复制的部分不会有提示.

解决方法

思路:在外边写个弹框,在组件上挂上,mouseover,mouseout事件,通过鼠标事件控制弹框的显隐,代码在上边大家可以去看看.
这里也遇到了一个问题
由于上边为了解决行点击事件,准确获取每行数据问题,咱们把.hang元素的属性pointer-events: none;导致hang中的元素触发不了悬停,所以得把里边的table-content元素属性设置成pointer-events: all;在这个元素上挂上属性:data-obj=“JSON.stringify(item)”,这样完美解决了.

希望对你有帮助,虽然这个组件使用中出现了好多问题,但是对于只实现滚动的需求,这个组件还是很好用的

相关文章:

vue 基于vue-seamless-scroll无缝滚动的用法和遇到的问题解决

vue 基于vue-seamless-scroll无缝滚动的用法和遇到的问题解决 背景 最近再做一个大屏项目,需要用到表格滚动效果,之前自己写过js实现,最近发现一个组件vue-seamless-scroll可以实现滚动,感觉挺方便的,准备用一下,但是用完之后才发现这个组件有很多坑需要解决.我把用法和一些问…...

SmartX 边缘计算解决方案:简单稳定,支持各类应用负载

在《一文了解近端边缘 IT 基础架构技术需求》文章中&#xff0c;我们为大家分析了边缘应用对 IT 基础架构的技术要求&#xff0c;以及为什么超融合架构是支持边缘场景的最佳选择。值得一提的是&#xff0c;IDC 近日发布的《中国软件定义存储&#xff08;SDS&#xff09;及超融合…...

FPGA 多路视频处理:图像缩放+视频拼接显示,HDMI采集,提供2套工程源码和技术支持

目录 1、前言版本更新说明免责声明 2、相关方案推荐FPGA图像缩放方案推荐FPGA视频拼接方案推荐 3、设计思路框架视频源选择IT6802解码芯片配置及采集动态彩条缓冲FIFO图像缩放模块详解设计框图代码框图2种插值算法的整合与选择 视频拼接算法图像缓存视频输出 4、vivado工程1&am…...

【数据结构】抽象数据类型

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 目录 &#x1f38f;数据类型 &#x1f38f;抽象数据类型 结语 &#x1f38f;数据类型 数据类型:是指一组性质相同的值的集合及定义在此集合上的一些操作的总称. 数据类型(d…...

Android 查看路由表

Android 查看路由表_android 路由表_念雅的博客-CSDN博客...

vulnhub靶机-DC系列-DC-3

文章目录 信息收集漏洞查找漏洞利用SQL注入John工具密码爆破反弹shell 提权 信息收集 主机扫描 arp-scan -l可以用netdiscover 它是一个主动/被动的ARP 侦查工具。使用Netdiscover工具可以在网络上扫描IP地址,检查在线主机或搜索为它们发送的ARP请求。 netdiscover -r 192.1…...

【CTFHUB】SSRF原理之简单运用(一)

一、漏洞原理 SSRF 服务端请求伪造 原理&#xff1a;在某些网站中提供了从其他服务器获取数据的功能&#xff0c;攻击者能通过构造恶意的URL参数&#xff0c;恶意利用后可作为代理攻击远程或本地的服务器。 二、SSRF的利用 1.对目标外网、内网进行端口扫描。 2.攻击内网或本…...

wepack打包生产环境使用http-proxy-middleware做api代理转发的方法

首先安装http-proxy-middleware依赖&#xff0c;这个用npm和yarn安装都可以。 然后在express服务器的代码增加如下内容&#xff1a; const express require("express"); const app express(); const { createProxyMiddleware, fixRequestBody, } require("h…...

一百八十六、大数据离线数仓完整流程——步骤五、在Hive的DWS层建动态分区表并动态加载数据

一、目的 经过6个月的奋斗&#xff0c;项目的离线数仓部分终于可以上线了&#xff0c;因此整理一下离线数仓的整个流程&#xff0c;既是大家提供一个案例经验&#xff0c;也是对自己近半年的工作进行一个总结。 二、数仓实施步骤 &#xff08;五&#xff09;步骤五、在Hive的…...

Idea引入thymeleaf失败解决方法

报错 Whitelabel Error Page This application has no explicit mapping for /error, so you are seeing this as a fallback.Fri Sep 29 09:42:00 CST 2023 There was an unexpected error (typeNot Found, status404). 原因&#xff1a;html没有使用thymeleaf 首先要引入…...

Dev C++安装与运行

参考: https://blog.csdn.net/Keven_11/article/details/126388791 https://www.cnblogs.com/-Wallace-/p/cpp-stl.html 2021年真题要求 2022年真题要求 河南省的考试环境 IDE环境 Dev C 安装 下载 安装 点击OK&#xff0c;选择我接受 修改安装路径为D盘d:\Program Fi…...

Docker下如何构建包含延迟插件的RabbitMQ镜像

&#x1f468;&#x1f3fb;‍&#x1f4bb; 热爱摄影的程序员 &#x1f468;&#x1f3fb;‍&#x1f3a8; 喜欢编码的设计师 &#x1f9d5;&#x1f3fb; 擅长设计的剪辑师 &#x1f9d1;&#x1f3fb;‍&#x1f3eb; 一位高冷无情的编码爱好者 大家好&#xff0c;我是 DevO…...

Vue3理解(6)

列表渲染 1.v-for指令基于一个数组来渲染列表&#xff0c;v-for指令的值需要使用 item in items形式的特殊语法,items是源数据的数组&#xff0c;而item是迭代项的别名。 2.在v-for块中可以完整访问父作用域内的属性和变量&#xff0c;v-for的第二个参数表示当前项的位置索引。…...

react+IntersectionObserver实现页面丝滑帧动画

实现效果&#xff1a; 加入帧动画前&#xff1a; 普通的静态页面 加入帧动画后&#xff1a; 可以看到&#xff0c;加入帧动画后&#xff0c;页面效果还是比较丝滑的。 技术实现 加入animation动画类 先用 **scss **定义三种动画类&#xff1a; .withAnimation {.fade1 {ani…...

项目实战第四十六讲:财务经营看板

项目实战第四十六讲:财务经营看板 本文是项目实战第四十六讲,财务经营看板。财务模块划分为两类:① 财务工具(执行和业务财务闭环)② 财务报表,本期需求为新增财务看板,共增加4个看板 文章目录 项目实战第四十六讲:财务经营看板1、需求背景2、流程图3、技术方案4、相关…...

【VUE复习·10】v-for 高级::key 作用和原理;尽量不要使用 index 来遍历

总览 1.:key 作用和原理 2.尽量不要使用 index 来遍历 一、:key 作用和原理 1.数据产生串位的原因 在我们使用 index 进行遍历的时候&#xff0c;会出现虚拟 DOM 和 真实 DOM 的渲染问题。 二、尽量不要使用 index 来遍历 详情见视频 1/3 处&#xff1a; https://www.bili…...

阿里云七代云服务器实例、倚天云服务器及通用算力型和经济型实例规格介绍

在目前阿里云的云服务器产品中&#xff0c;既有五代六代实例规格&#xff0c;也有七代和八代倚天云服务器&#xff0c;同时还有通用算力型及经济型这些刚推出不久的新品云服务器实例&#xff0c;其中第五代实例规格目前不在是主推的实例规格了&#xff0c;现在主售的实例规格是…...

《IIS系列》IIS日志文件管理

我们在使用IIS部署网站的时候&#xff0c;随着时间推移&#xff0c;IIS 生成的日志文件可能会消耗大量磁盘空间。 日志可能会填满整个硬盘驱动器&#xff0c;为了缓解此问题&#xff0c;许多用户完全关闭日志记录&#xff0c;但关了记录又会导致出现问题无从排查&#xff0c;故…...

3D孪生场景搭建:模型阵列摆放

阵列摆放概念 阵列摆放是指将物体、设备或元件按照一定的规则和间距排列组合的方式。在工程和科学领域中&#xff0c;阵列式摆放常常用于优化空间利用、提高效率或增强性能。 阵列摆放通常需要考虑间距、角度、方向、对称性等因素&#xff0c;以满足特定的要求和设计目标。不同…...

什么是大数据可视化

在互联网高速发展的当今&#xff0c;5G的兴起加速了数据传输的速度&#xff1b;与此同时&#xff0c;智能物联网如智慧家电、可穿戴设备等产品的火热&#xff0c;进一步扩充了数据获取的渠道。不仅仅在网页上、手机和电脑应用上以秒计产生海量数据&#xff0c;智能设备同时也在…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

android13 app的触摸问题定位分析流程

一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...

Neko虚拟浏览器远程协作方案:Docker+内网穿透技术部署实践

前言&#xff1a;本文将向开发者介绍一款创新性协作工具——Neko虚拟浏览器。在数字化协作场景中&#xff0c;跨地域的团队常需面对实时共享屏幕、协同编辑文档等需求。通过本指南&#xff0c;你将掌握在Ubuntu系统中使用容器化技术部署该工具的具体方案&#xff0c;并结合内网…...

Modbus转Ethernet IP深度解析:磨粉设备效率跃升的底层技术密码

在建材矿粉磨系统中&#xff0c;开疆智能Modbus转Ethernet IP网关KJ-EIP-101的应用案例是一个重要的技术革新。这个转换过程涉及到两种主要的通信协议&#xff1a;Modbus和Ethernet IP。Modbus是一种串行通信协议&#xff0c;广泛应用于工业控制系统中。它简单、易于部署和维护…...

创客匠人:如何通过创始人IP打造实现知识变现与IP变现的长效增长?

在流量红利逐渐消退的当下&#xff0c;创始人IP的价值愈发凸显。它不仅能够帮助中小企业及个人创业者突破竞争壁垒&#xff0c;还能成为企业品牌影响力的核心资产。然而&#xff0c;市场上IP孵化机构鱼龙混杂&#xff0c;如何选择一家真正具备长期价值的合作伙伴&#xff1f;创…...

如何在Spring Boot中使用注解动态切换实现

还在用冗长的if-else或switch语句管理多个服务实现? 相信不少Spring Boot开发者都遇到过这样的场景:需要根据不同条件动态选择不同的服务实现。 如果告诉你可以完全摆脱条件判断,让Spring自动选择合适的实现——只需要一个注解,你是否感兴趣? 本文将详细介绍这种优雅的…...

CSS(2)

文章目录 Emmet语法快速生成HTML结构语法 Snipaste快速生成CSS样式语法快速格式化代码 快捷键&#xff08;VScode&#xff09;CSS 的复合选择器什么是复合选择器交集选择器后代选择器(重要)子选择器(重要&#xff09;并集选择器(重要&#xff09;**链接伪类选择器**focus伪类选…...