下拉刷新组件(TS)

@下拉刷新

条件:

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

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

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

4 盒子的偏移量: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;

 随手记录!

猜你喜欢

转载自www.cnblogs.com/boyChr/p/11572678.html
今日推荐