在家做私房菜的网站,网页免费版,网站建设教程大全 百度网盘,福建建设部网站最开始直接setInterval里#xff0c;useState硬写#xff0c;发现更新不#xff0c;固定值
换let#xff0c;发现dom更新不了
正确做法是用ref
并且pc端可以长按的#xff0c;只是要用onTouchStart#xff0c;不要用onMouseDown
onTouchStart{handleMouseDown} onTou…
最开始直接setInterval里useState硬写发现更新不固定值
换let发现dom更新不了
正确做法是用ref
并且pc端可以长按的只是要用onTouchStart不要用onMouseDown
onTouchStart{handleMouseDown} onTouchEnd{handleMouseUp} onTouchMove{handleMouseUp}
然后我是一个rounded大盒子
盒子里套了一个rounde的absoulte但是overflow-hidden和一个正方形的div这样就会出现竖线进度条。 divclassNamepy-[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/divspan onTouchStart{handleMouseDown} onTouchEnd{handleMouseUp} onTouchMove{handleMouseUp}长按跳过/spanLongClickIcon //div code const [progress, setProgress] useState(0)const timerRef useRefnumber()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)}}, [])
就类似这样实现的胶囊切半形加载
