长按加速- 解决react - setInterval下无法更新问题

最开始直接setInterval里,useState硬写,发现更新不,固定值

换let,发现dom更新不了

正确做法是用ref

并且pc端可以长按的,只是要用onTouchStart,不要用onMouseDown

onTouchStart={handleMouseDown} onTouchEnd={handleMouseUp} onTouchMove={handleMouseUp}

然后我是一个rounded大盒子

盒子里套了一个rounde的absoulte,但是overflow-hidden,和一个正方形的div,这样就会出现竖线进度条。

 <divclassName="py-[6px] px-[12px] rounded-[25px] flex justify-center  items-center gap-[5px] border "style={{ border: "1px solid rgba(255,255,255,0.80)" }}><div className=" absolute w-full h-full -z-10   overflow-hidden rounded-[25px] "><divclassName={`h-full -z-10  bg-[rgba(255,255,255,0.40)]`}style={{ width: `${progress}%` }}></div></div><span onTouchStart={handleMouseDown} onTouchEnd={handleMouseUp} onTouchMove={handleMouseUp}>长按跳过</span><LongClickIcon /></div>

code

 const [progress, setProgress] = useState(0)const timerRef = useRef<number>()const handleMouseDown = () => {timerRef.current = setInterval(() => {setProgress((prevProgress) => {if (prevProgress === 100) {clearInterval(timerRef.current)handleClick()return 100} else {return prevProgress + 1}})}, 10)}const handleMouseUp = () => {clearInterval(timerRef.current)setProgress(0)}useEffect(() => {return () => {setProgress(0)clearInterval(timerRef.current)}}, [])

就类似这样,实现的胶囊💊切半形加载

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

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

相关文章

在设计电气系统时,电气工程师需要考虑哪些关键因素?

在设计电气系统时&#xff0c;电气工程师需要考虑多个关键因素&#xff0c;以确保系统的安全性、可靠性、效率和经济性。我收集归类了一份plc学习包&#xff0c;对于新手而言简直不要太棒&#xff0c;里面包括了新手各个时期的学习方向编程教学、问题视频讲解、毕设800套和语言…

word 设置多级混合标题自动更新

目录预览 一、问题描述二、原因分析三、解决方案四、参考链接 一、问题描述 有没有体会过多级标题&#xff0c;怎么设置都不听使唤的情况&#xff1f; 我想要的格式是&#xff1a; 二、原因分析 多级标题中发现&#xff0c;输入编号格式这里有个数字没有底纹,是了&#xff0…

系统架构设计师教程 第3章 信息系统基础知识-3.1 信息系统概述

系统架构设计师教程 第3章 信息系统基础知识-3.1 信息系统概述 3.1.1 信息系统的定义3.1.1.1 信息系统3.1.1.2 信息化3.1.2 信息系统的发展3.1.2.1 初始阶段3.1.2.2 传播阶段3.1.2.3 控制阶段3.1.2.4 集成阶段3.1.2.5 数据管理阶段3.1.2.6 成熟阶段3.1.3 信息系统的分类3.…

Redis-基础概念

目录 概念 Redis是什么 Redis 和 MySQL 的区别&#xff1f; Redis单线程有什么极端场景的瓶颈 Redis为什么快? 为什么Redis是单线程? Redis是单线程还是多线程 Redis为什么选择单线程做核心处理 Redis6.0之后引入了多线程&#xff0c;你知道为什么吗? 瓶颈是内存和I…

C#进阶-基于.NET Framework 4.x框架实现ASP.NET WebForms项目IP拦截器

在这篇文章中&#xff0c;我们将探讨如何在 ASP.NET WebForms 中实现IP拦截器&#xff0c;以便在 ASMX Web 服务方法 和 HTTP 请求 中根据IP地址进行访问控制。我们将使用自定义的 SoapExtension 和 IHttpModule 来实现这一功能&#xff0c;并根据常用的两种文本传输协议&#…

大模型“重构”教育:解构学习奥秘,推动教育普惠

大模型“重构”千行百业系列选题 生成式人工智能的热潮&#xff0c;为AI领域的发展注入新的活力&#xff0c;而“赋能千行百业”已经成为人们普遍对于人工智能和大模型的全新理解。 人工智能和大模型技术的迅猛发展正在以前所未有的速度深刻改变着各个行业。正如专家所预测&a…

【Apache POI】Java解析Excel文件并处理合并单元格-粘贴即用

同为牛马&#xff0c;点个赞吧&#xff01; 一、Excel文件样例 二、工具类源码 import org.apache.poi.ss.usermodel.*; import org.apache.poi.ss.util.CellRangeAddress; import org.apache.poi.xssf.usermodel.XSSFWorkbookFactory; import org.springframework.web.multip…

windows实现自动化按键

1.选择目标窗口 获取窗口句柄 void KeyPresser::selectWindow() {SetWinEventHook(EVENT_SYSTEM_FOREGROUND, EVENT_SYSTEM_FOREGROUND, NULL, WinEventProc, 0, 0, WINEVENT_OUTOFCONTEXT);selectedWindowLabel->setText("请点击目标窗口..."); }void CALLBACK …

ZStack Cloud 5.1.8正式发布

2024年7月5日&#xff0c;ZStack Cloud正式发布最新版本——ZStack Cloud 5.1.8&#xff0c;涵盖一系列重要功能&#xff0c;以下为您进行详细介绍。 亮点速览 GPU运维管理增强&#xff1a;新增GPU设备统一管理界面&#xff1b;支持GPU工作状态和实时负载监控报警三层网络运维…

套用BI方案做数据可视化是种什么体验?

在数字化转型的浪潮中&#xff0c;数据可视化作为连接数据与决策的桥梁&#xff0c;其重要性日益凸显。近期&#xff0c;我有幸体验了奥威BI方案进行数据可视化的全过程&#xff0c;这不仅是一次技术上的探索&#xff0c;更是一次对高效、智能数据分析的深刻感受。 初识奥威&a…

嵌入式物联网在教育行业的应用——案例分析

作者主页: 知孤云出岫 嵌入式物联网在教育行业的应用——案例分析 目录 作者主页:嵌入式物联网在教育行业的应用——案例分析一、引言二、智能教室&#xff1a;环境监测系统1. 硬件需求2. 电路连接3. 代码实现 三、个性化学习&#xff1a;智能学习平台1. 数据处理与分析2. 代…

从零开始学量化~Ptrade使用教程(六)——盘后定价交易、港股通与债券通用质押式回购

盘后固定价交易 实现科创板、创业板的盘后固定价交易&#xff0c;界面如下显示&#xff1a; 交易 输入科创板或创业板代码&#xff0c;选择委托方向&#xff0c;输入委托价格、委托数量&#xff0c;点击“买入”或“卖出”按钮进行委托。可出现一个委托提示框提示是否继续委托操…

PyTorch张量拼接方式【附维度拼接/叠加的数学推导】

文章目录 1、简介2、torch.cat3、torch.stack4、数学过程4.1、维度拼接4.1.1、二维张量4.1.2、三维张量4.1.3、具体实例 4.2、维度叠加4.2.1、0维叠加4.2.2、1维叠加4.2.3、2维叠加&#xff08;非常重要⭐&#xff09; &#x1f343;作者介绍&#xff1a;双非本科大三网络工程专…

什么是页分裂?insert 操作对 B+ 树结构的改变是什么样的?

什么是页分裂&#xff1f; 如果我们使用非自增主键&#xff0c;由于每次插入主键的索引值都是随机的&#xff08;比如 UUID&#xff09;&#xff0c;因此每次插入新的数据时&#xff0c;就可能会插入到现有数据页中间的某个位置&#xff0c;这将不得不移动其它数据来满足新数据…

通讯的概念

通讯的概念 文章目录 通讯的概念1.通讯的基本概念2. 串行通讯与并行通讯2. 全双工、半双工及单工通讯3. 同步通讯与异步通讯4. 通讯速率 1.通讯的基本概念 通讯是指在嵌入式系统中实现数据交换的技术手段&#xff0c;它涉及到硬件与硬件、硬件与软件之间的信息传输。基本概念包…

数学基础【俗说矩阵】:齐次线性方程和非齐次线性方程求解-学习笔记

一、矩阵基础知识 二元一次方程的传统解法 不论是代入消元法还是加减消元法都统称 【高斯消元法】。 齐次方程组和非齐次方程组 线性方程组的解 线性方程的向量展示 向量规则 矩阵的高斯消元和初等行变行及其规则 高斯消元规则 初等行变换 矩阵经初等行变换成阶梯矩阵&…

Ubuntu搭建邮件服务器需要哪些步骤与方法?

Ubuntu搭建邮件服务器的注意事项&#xff1f;服务器的配置方法&#xff1f; 搭建自己的邮件服务器不仅可以增强隐私保护&#xff0c;还能提供更高的灵活性。AokSend将介绍在Ubuntu上搭建邮件服务器的详细步骤和方法&#xff0c;确保你能够顺利完成整个设置过程。 Ubuntu搭建邮…

昇思25天学习打卡营第六天|应用实践/计算机视觉/Vision Transformer图像分类

心得 运行模型似乎有点靠天意&#xff1f;每次跑模型之前先来个焚香沐浴&#xff1f;总之今天是机器视觉的最后一课了&#xff0c;尽管课程里强调模型跑得慢&#xff0c;可是我的这次运行&#xff0c;居然很快的就看到结果了。 如果一直看我这个系列文章的小伙伴&#xff0c;…

React@16.x(59)Redux@4.x(8)- 中间件

目录 1&#xff0c;介绍2&#xff0c;核心原理1&#xff0c;一个问题 3&#xff0c;Redux 使用中间件1&#xff0c;中间件的写法2&#xff0c;多个中间件的执行顺序 1&#xff0c;介绍 中间件&#xff1a;和插件的作用差不多&#xff0c;能够在不影响原本功能、不改动原本代码…

ubuntu24.04 linux bcm94352hmb 无线网卡(带蓝牙功能)无法连接蓝牙设备的解决办法

ubuntu24.04 linux bcm94352hmb 无线网卡&#xff08;带蓝牙功能&#xff09;无法连接蓝牙设备的解决办法 问题描述 小本是自己换装的bcm94352hmb&#xff0c;现在跑不动黑苹果了&#xff0c;换装ubuntu&#xff0c;该网卡在黑苹果上和windows上都能正常工作&#xff0c;到了…