长按加速- 解决react - setInterval下无法更新问题
最开始直接setInterval里,useState硬写,发现更新不,固定值
换let,发现dom更新不了
正确做法是用ref
并且pc端可以长按的,只是要用onTouchStart,不要用onMouseDown
onTouchStart={handleMouseDown} onTouchEnd={handleMouseUp} onTouchMove={handleMouseUp}
然后我是一个rounded大盒子
盒子里套了一个rounde的absoulte,但是overflow-hidden,和一个正方形的div,这样就会出现竖线进度条。
{ border: "1px solid rgba(255,255,255,0.80)" }} > { width: `${progress}%` }} > 长按跳过
code
const [progress, setProgress] = useState(0) const timerRef = useRef() 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) } }, [])
就类似这样,实现的胶囊💊切半形加载
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。