用react写下拉刷新

index.tsx

import { useRef, useEffect,useState } from 'react'
import "./tab.less"
export default function PullDown() {
  const PullBox = useRef<HTMLDivElement | null>(null)
  let disY: number = 0;
  let y: number = 0;
  let scale: number = 0;
  let clientHeights: number = 0;
  let moveheight: number = 0;
  let startY: number = 0; 
  let endY: number = 0;
  let scropllTops: number = 0;
  let [loadingMsg,setloadingMsg]=useState<string>("正在加载中...")
  const GetBox = (): HTMLDivElement => {
    return PullBox.current as HTMLDivElement
  }
  const GetChild = (n: number): HTMLDivElement => {
    return GetBox().children[n] as HTMLDivElement
  }
  const FnMove = (ev: TouchEvent) => {
    scropllTops = document.documentElement.scrollTop || document.body.scrollTop
    if (scropllTops <= 0) {
      y = ev.changedTouches[0].pageY - disY;


      startY = y
      moveheight = clientHeights / 3
      scale = clientHeights / moveheight
      if (startY > endY && GetChild(1).scrollTop == 0) {
        if(GnKernel()){




        }else{
          ev.preventDefault && ev.preventDefault()
        }
      }
      GetChild(0).style.height = y / scale + 'px'
      endY = y
    }




  }
  const FnEnd = (ev: TouchEvent) => {
    startY = 0
    endY = 0
    GetChild(0).style.transition = '.4s ease height'
    if (y > 80) {
      y = 80;
      setTimeout(()=>{
        setloadingMsg("刷新完毕")
      },500)
      setTimeout(() => {
        y = 0;
        GetChild(0).style.height = `${y}px`;
      }, 1000)
    } else {
      y = 0
    }
    GetChild(0).style.height = `${y}px`;
    GetChild(1).ontouchmove = null;
    GetChild(1).ontouchend = null;
  }
  const FnStart = (ev: TouchEvent) => {
    GetChild(0).style.transition = 'none'
    setloadingMsg("正在加载中...")




    disY = ev.changedTouches[0].pageY - y 
    GetChild(1).ontouchmove = FnMove
    GetChild(1).ontouchend = FnEnd
  }
  const FnScroll=(()=>{
    scropllTops = document.documentElement.scrollTop
    if(scropllTops<=0){
      document.documentElement.scrollTop=0
    }
  })
  const GnKernel=():boolean=>{
    if(window.navigator.userAgent.toLowerCase().indexOf("iphone")!==-1){
      return true
    }else{
      return false
    }
  }
  useEffect(() => {
    clientHeights = document.documentElement.clientHeight
    GetChild(1).ontouchstart = FnStart
    document.onscroll = FnScroll
    
  })
  return <div className="pulldown" ref={PullBox}>
    <div className="pulltop">
      <div className="pulltop-item">{loadingMsg}</div>
    </div>
    <div className="pulldown-box">
      <div className="pull-box-item"></div>
      <div className="pull-box-item"></div>
      <div className="pull-box-item"></div>
      <div className="pull-box-item"></div>
      <div className="pull-box-item"></div>
      <div className="pull-box-item"></div>
      <div className="pull-box-item"></div>
      <div className="pull-box-item"></div>
      <div className="pull-box-item"></div>
      <div className="pull-box-item"></div>
      <div className="pull-box-item"></div>
      <div className="pull-box-item"></div>
    </div>
  </div>
}

index.less

.pulldown{
    width: 100vw;
    min-height: 100vh;
    // position: relative;
    .pulltop{
        width: 100vw;
        height: 0;
        background: seagreen;
        overflow: hidden;


        .pulltop-item{
            text-align: center;
        }
    }
    .pulldown-box{
        width: 100vw;
        height: 100vh;
        background: salmon;
        .pull-box-item{
            width: 100vw;
            height: 10vh;
        }
        .pull-box-item:nth-child(2n){
            background: rgb(102, 255, 0);
        }
        .pull-box-item:nth-child(2n-1){
            background: rgb(250, 114, 186);
        }
    }
}