React里面table组件的时间轴的位置计算

如上图的时间轴位置计算

计算时间轴位置倒是容易,主要是React里面的antd的table组件怎么监听滚动是个问题

/*** (月台/时间)为150,时间为100,每个格子为120,120px/30分钟=4px/分钟*  00:00分为250px*  00:01分为254px*  两个时间戳相减*  */

本来尝试使用ref的那种方式,后来发现行不通

后来使用onScrollCapture来监听到横向滚动的数值

思路是这样,如果滚动条不滚动的话,那么时间轴的位置就是基本值250+(两个时间戳相减*4);滚动的话,就是把滚动的距离减掉;

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

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

相关文章

3Dmax灯光学习(Vray灯光应用)

渲染效果图可以用渲染100哦,最高支持max2024,cr11,vr6.2,支持LUT和Acescg工作流等常用插件,同时森林插件7.43也进行了支持,注册填邀请码【7788】即可免费测试! 灯光应用 普通灯光/标准灯光(外景…

爬虫笔记(一):实战登录古诗文网站

需求:登录古诗文网站,账号+密码+图形验证码 第一:自己注册一个账号+密码哈 第二:图形验证码,需要一个打码平台(充钱,超能力power!)或…

定向减免!函数计算让 ETL 数据加工更简单

业内较为常见的高频短时 ETL 数据加工场景,即频率高时延短,一般费用大头均在函数调用次数上,推荐方案一般为攒批处理,高额的计算成本往往令用户感到头疼,函数计算推出定向减免方案,让 ETL数据加工更简单、更…

容器技术1-容器与镜像简介

目录 1、容器与虚拟化 2、容器发展历程 3、镜像简介 4、镜像原理 (1)分层存储 (2)写时复制 (3)内容寻址 (4)联合挂载 1、容器与虚拟化 容器技术在操作系统层面实现了对计算机…

HarmonyOS【应用服务开发】在模块中添加Ability

Ability是应用/服务所具备的能力的抽象,一个Module可以包含一个或多个Ability。应用/服务先后提供了两种应用模型: FA(Feature Ability)模型: API 7开始支持的模型,已经不再主推。Stage模型:AP…

深入理解MyBatis中的#{ }和${ }占位符及参数传递过程

深入理解MyBatis中的#{ }和${ }占位符及参数传递过程 MyBatis是一个广泛使用的持久层框架,它以其强大的数据库访问能力和灵活的SQL映射配置而著称。在MyBatis中,#{ } 和 ${ } 是两种常用的占位符,用于构建动态的SQL语句。本文将深入研究这两种…

uniCloud ---- uni-captch实现图形验证码

目录 用途说明 组成部分 目录结构 原理时序 云端一体组件介绍 验证码配置(可选): 普通验证码组件 公共模块 云函数公用模块 项目实战 创建云函数 创建注册页 创建云函数 关联公用模块 uni-captcha 刷新验证码 自定义实现 验…

使用 Kali Linux Hydra 工具进行攻击测试和警报生成

一、Hydra 工具和 Kali Linux 简介 在网络安全领域中,渗透测试是评估系统密码强度的重要组成部分。Hydra 是一款由黑客组织“The Hackers Choice”开发的开源登录破解工具,支持50多种协议。本教程将探索如何将 Hydra 与 Kali Linux 结合使用&#xff0c…

浏览器插件:Web Scraper 基本用法和抓取页面内容(无需写代码,即可爬取数据)

Web Scraper 是一个浏览器扩展,用于从页面中提取数据(网页爬虫)。对于简单或偶然的需求非常有用,例如正在写代码缺少一些示例数据,使用此插件可以很快从类似的网站提取内容作为模拟数据。从 Chrome 的插件市场安装后,页面 F12 打开…

最新 生成pdf文字和表格

生成pdf文字和表格 先看效果 介绍 java项目&#xff0c;使用apache的pdfbox工具&#xff0c;可分页&#xff0c;自定义列 依赖 <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox</artifactId><version>2.0.22<…

认识对比 React、Vue2、Vue3 三者的 diff 算法

React Diff 算法 认识 React Diff 算法 React 是 Fiber 架构的&#xff0c;Fiber 其实是一个链表的结构&#xff0c;但是由于没有设置反向指针&#xff0c;因此没有使用双端比对的方式去优化 Diff 算法&#xff08;没有反向指针&#xff0c;从右往左遍历链表会很困难&#xf…