下拉刷新组件（TS）

@下拉刷新

条件：

1 起始点：当鼠标按下去的那个点 startY

2 结束点: 当鼠标按下拖动后松开的点 pagaY

3 距离:distance=结束点-起始点

4 盒子的偏移量:offsetTop

let dropRefresh=(ele:any)=>{
  let startY:any,
      distance,
      initTop=ele.offsetTop;
  let touchStart=(e:any)=>{
    if(ele.offsetTop==initTop&&ele.scrollTop==0){
      startY=e.targetTouches[0].pageY;
        ele.addEventListener('touchmove',touchMove);
        ele.addEventListener('touchend',touchEnd);
      }

    };
  ele.addEventListener('touchstart',touchStart);
  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)=>{
      ele.removeEventListener('touchmove',touchMove);
      ele.removeEventListener('touchend',touchEnd);

      let timer=setInterval(()=>{
        if(initTop==ele.offsetTop){
          ele.style.top=initTop+'px';//需要注意的是。只要当前盒子的偏移量==盒子初始的偏移量=>让盒子的top值=initTop; 不然在滑动过程中很容易导致偏移量出现偏差 
          clearInterval(timer);
        }else{
          ele.style.top=ele.offsetTop-1+'px';
        }
      },0)
    };
};

export default dropRefresh;

　　

 随手记录！🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗