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

07-16 1053阅读

最开始直接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)
    }
  }, [])

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

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

VPS购买请点击我

文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

目录[+]