您的位置:首页 > 游戏 > 手游 > 长按加速- 解决react - setInterval下无法更新问题

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

2024/10/4 2:02:43 来源:https://blog.csdn.net/StrongerIrene/article/details/140447188  浏览:    关键词:长按加速- 解决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)}}, [])

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com