Pull-down refresh component (TS)

@Pull down to refresh

condition:

1 Starting point: when the mouse that point startY press down

2 end point: When the mouse down drag release point pagaY

3 Distance: distance = end point - start point

Box 4 offset: offsetTop

let dropRefresh=(ele:any)=>{
  let startY:any,
      distance,
      initTop=ele.offsetTop;
  let touchStart=(e:any)=>{
      startY=e.targetTouches[0].pageY;
      ele.addEventListener('touchmove',touchMove);
      ele.addEventListener('touchend',touchEnd);
    };
    let touchMove=(e:any)=>{
      let pageY=e.targetTouches[0].pageY;
      if(pageY>startY){
        distance=pageY-startY;
        ele.style.top=distance+initTop+'px';
      }else{
        ele.removeEventListener('touchmove',touchMove);
        ele.removeEventListener('touchend',touchEnd);
      }
    };
    let touchEnd=(e:any)=>{
      let timer:any;
      ele.removeEventListener('touchmove',touchMove);
      ele.removeEventListener('touchend',touchEnd);

      timer=setInterval(()=>{
        if(initTop+1==ele.offsetTop&&ele.scrollTop==0){
          clearInterval(timer);
        }
        ele.style.top = ele.offsetTop-1 + 'px' ;
      },5)
    };



  ele.addEventListener('touchstart',touchStart);
};

export default dropRefresh;

 Readily record!