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

使用vue-seamless-scroll实现echarts图表大屏滚动,出现空白间隔的解决方案

一、背景介绍

最近的业务开发需求,想要实现echarts图表大屏滚动,小编首先采用vue-seamless-scroll进行实现,结果发现第二屏出现空白间隔,尝试了多种解决方案均不生效,最终选择换一个方案。

二、封装的ScrollList组件

<template><div class="scrollContainer" :id="id" @mouseenter="monseenter" @mouseleave="mouseleave"><slot></slot></div>
</template><script>
export default {name: 'ScrollList',props: {id: String},data() {return {timer: null};},methods: {init() {this.setTimer();// this.$once代表只执行一次。如果组件是在keep-alive中包裹,则需要更换函数// 被keep-alive包裹住的组件有两个生命周期函数:activated和deactivatedthis.$once('hook:beforeDestroy', () => {this.removeTimer();});},removeTimer() {if (this.timer) {clearInterval(this.timer);this.timer = null;}},setTimer() {this.removeTimer();this.timer = setInterval(() => {// pixel height:include el and padding    read onlyconst scrollHeight = document.getElementById(this.id).scrollHeight;// visible area height:include el and padding  read onlyconst clientHeight = document.getElementById(this.id).clientHeight;const heightDifference = scrollHeight - clientHeight;// scroll height:readable and writabledocument.getElementById(this.id).scrollTop++;// when el scroll to topif (document.getElementById(this.id).scrollTop >= heightDifference - 1) {this.removeTimer();// make it go back to original location after one secondsetTimeout(() => {document.getElementById(this.id).scrollTop = 0;this.setTimer();}, 1000);}}, 44);},monseenter() {this.removeTimer();},mouseleave() {this.setTimer();}},mounted() {this.init();}
};
</script><style lang="scss" scoped>
.scrollContainer::-webkit-scrollbar {display: none;
}
.scrollContainer::scrollbar {display: none;
}
.scrollContainer {height: 100%;overflow: scroll;overflow-x: hidden;
}
</style>

三、使用ScrollList组件

<template><div><scrollList :id="'leftList'"><!-- todo 写需要循环滚动的代码 --></scrollList></div>
</template><script>import scrollList from '@/components/scrollList/index'export default {components: {scrollList}}
</script>

相关文章:

使用vue-seamless-scroll实现echarts图表大屏滚动,出现空白间隔的解决方案

一、背景介绍 最近的业务开发需求&#xff0c;想要实现echarts图表大屏滚动&#xff0c;小编首先采用vue-seamless-scroll进行实现&#xff0c;结果发现第二屏出现空白间隔&#xff0c;尝试了多种解决方案均不生效&#xff0c;最终选择换一个方案。 二、封装的ScrollList组件…...

ios使用UIScrollView和PageControl创建图片轮播

1.创建cocoa touch class 2.同时创建xib页面 3.SceneDelegate设置根视图控制器 // // SceneDelegate.m // iosstudy2024 // // Created by figo on 2024/8/5. //#import "SceneDelegate.h" #import "WidgetViewController.h"interface SceneDelegate …...

3D 生成重建024-LGM第一个开源的3D生成大模型!

3D 生成重建024-LGM第一个开源的3D生成大模型 文章目录 0 论文工作1 论文方法2 实验效果 0 论文工作 这篇论文介绍了一种名为LGM&#xff08;大型多视角高斯模型&#xff09;的新方法&#xff0c;用于从单视角图像或文本提示生成高分辨率的三维内容。该方法的核心思想是双重的…...

linux目录权限

一、目录权限的基本概念 Linux中的每个文件和目录都有与之关联的权限&#xff0c;这些权限决定了谁可以读取、写入或执行它们。权限分为三组&#xff1a; 所有者&#xff08;Owner&#xff09;权限&#xff1a;目录所有者的权限群组&#xff08;Group&#xff09;权限&#x…...

语言模型使用心得

使用像文心一言这样的语言模型&#xff0c;在撰写文章时确实能提供极大的帮助。然而&#xff0c;重要的是我们要明确主次关系&#xff1a;自己的创意和内容应当是文章的核心&#xff0c;而语言模型则扮演着一个辅助角色&#xff0c;帮助我们梳理思路&#xff0c;使文章条理更加…...

ChatGPT客户端安装教程(附下载链接)

用惯了各类AI的我们发现每天打开网页还挺不习惯和麻烦&#xff0c;突然发现客户端上架了&#xff0c;懂摸鱼的人都知道这里面的道行有多深&#xff0c;话不多说&#xff0c;开整&#xff01; 以下是ChatGPT客户端的详细安装教程&#xff0c;适用于Windows和Mac系统&#xff1a…...

Electron 基础+传值+引用+安全

文章目录 概要elctron 生命周期及窗口应用主进程与渲染进程交互技术细节electron 中需要注意的安全问题 概要 一、Electron简介 Electron是一个开源框架&#xff0c;它允许开发者使用JavaScript、HTML和CSS构建跨平台的桌面应用程序。它基于Chromium&#xff08;谷歌浏览器的…...

手机租赁系统全面解析与开发指南

内容概要 手机租赁系统已经成为现代商业中不可或缺的一部分&#xff0c;尤其是在智能手机普及的时代。随着消费者对新机型兴趣的不断增加&#xff0c;大家纷纷走上了“试一试再买”的道路&#xff0c;手机租赁这条路因此越走越宽。这部分的市场需求让创业者们看到了机会。不仅…...

mongoDb的读session和写session权限报错问题

go在使用mongoDb时用到了全局会话&#xff0c;发现在创建的session的逻辑相同&#xff0c;首先会进行数据的查询&#xff0c;此时获取了全局session执行读操作&#xff0c;查询所有文档&#xff0c;则当前会话为读会话&#xff0c;当再去插入时发现会报错&#xff0c;此时sessi…...

Centos在2024年6月30日停止维护后如何换yum源安装组件

现象&#xff1a; 在centos7里使用yum安装报错&#xff1a; Loading mirror speeds from cached hostfile Could not retrieve mirrorlist http://mirrorlist.centos.org/?release7&archx86_64&repoos&infrastock error was 14: curl#6 - “Could not resolve…...

阿里云ACP云计算模拟试题(附答案解析)

1、将基础设施作为服务的云计算服务类型是_____服务。 A.laas B.Paas C.SaaS D.Daas 答案&#xff1a;A 解析&#xff1a;基础设施即服务有时缩写为 IaaS&#xff0c;包含云 IT 的基本构建块&#xff0c;通常提供对联网功能、计算机&#xff08;虚拟或专用硬件&#x…...

简单的爬虫脚本编写

一、数据来源分析 想爬取一个网站的数据&#xff0c;我们首先要进行数据分析。通过浏览器F12开发者工具栏进行抓包&#xff0c;可以分析我们想要的数据来源。 通过关键字搜索&#xff0c;可以找到相对应的数据包 二、爬虫实现 需要用到的模块为&#xff1a;request&#xf…...

[MySQL基础](三)SQL--图形化界面+DML

本专栏内容为&#xff1a;MySQL学习专栏 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;MySql &#x1f69a;代码仓库&#xff1a;小小unicorn的代码仓库&#x1f69a; &#x1f339;&#x1f339;&#x1f339;关注我带你学习编程知识 目录 图…...

11.23[大数据]

PRO1:LSTM模型预测输出都是同一个值&#xff1f; 画出来的图像就是一条横线 这个搜了搜&#xff0c;原因可能有很多&#xff0c;但感觉最主要的原因极可能是激活函数选择不当&#xff0c;以及层的搭建不合适 原模型是 REF https://zhuanlan.zhihu.com/p/654325094 https:/…...

C++ 游戏开发进阶:打造更精彩的游戏世界

在之前的 C 游戏开发入门教程中&#xff0c;我们已经了解了游戏开发的基本概念和一些简单的实现方法。现在&#xff0c;让我们进一步深入探讨 C 游戏开发中的进阶技术&#xff0c;为玩家打造更精彩、更具沉浸感的游戏体验。 一、游戏物理引擎的集成 物理引擎是现代游戏开发中…...

想在iPad上远程操作安卓手机的APP,怎样实现iPad远程控制安卓?

学生党或互联网行业的打工人&#xff0c;人手连三台电子设备也很常见&#xff0c;手机、平板还有笔记本电脑一大堆&#xff0c;如果出门要全带上&#xff0c;背包压力也变大。 有没有想过用远程控制功能&#xff0c;让iPad远程控制安卓手机&#xff1f;这样做&#xff0c;出门就…...

GPS北斗卫星授时服务器功能是什么?应用是什么?

GPS北斗卫星授时服务器功能是什么&#xff1f;应用是什么&#xff1f; GPS北斗卫星授时服务器功能是什么&#xff1f;应用是什么&#xff1f; 摘 要:首先对计算机网络时间同步相关技术进行了介绍,然后阐述了时间同步技术在现代计算机网络中的应用与发展,最后指出时间同步网络…...

利用Java爬虫获取商品数据的完整指南

在当今数字化时代&#xff0c;数据已成为企业和个人决策的关键资源。特别是在电商领域&#xff0c;获取商品数据对于市场分析、价格监控和竞争对手分析至关重要。Java作为一种强大且广泛使用的编程语言&#xff0c;非常适合开发复杂的爬虫系统。本文将详细介绍如何利用Java编写…...

mysql 迁移达梦数据库出现的 sql 语法问题 以及迁移方案

迁移方案&#xff1a; 1.下载官方DM8开发版 产品下载-达梦数据 2.会下载到win系统下的左下角的开始 1.1.2 创建工程 右击空白处&#xff0c;新建 1.1.3 新建迁移 1.1.3.1 选择迁移方式 MySql迁移DM 1.1.3.2 配置数据源 输入你的mysql配置后&#xff0c;刷新&#xff0c;选择…...

深入解析css-浮动-学习小结

浮动设计初衷 类似报纸的布局栏&#xff0c;浮动是为了让图片嵌在文本流中&#xff0c;文本不会覆盖图片&#xff0c;但早期布局只有浮动&#xff0c;因此将浮动用于布局&#xff0c;后来才有了display:inline-block display: table flexbox和网格布局等 基本代码 <html&…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

九天毕昇深度学习平台 | 如何安装库?

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

深入理解Optional:处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...