原生下拉刷新

下拉刷新

 <div class="content">
      <div class="pullRefresh">
        <div class="li">11111</div>
        <div class="li">11111</div>
        </div>
  </div>

 //  获取到操作的DOM元素
        var content = document.querySelector(".content");
        var pullRefresh = document.querySelector(".pullRefresh");
        
        var startY,endY;

        content.addEventListener("touchstart",function(e){
            startY = parseInt(e.changedTouches[0].pageY);
        });

        content.addEventListener("touchmove",function(e){
            endY = parseInt(e.changedTouches[0].pageY);
            if(endY - startY > 0){
              content.style.marginTop = endY - startY + "px";
              pullRefresh.style.height = endY - startY + "px";
            }
        });

        content.addEventListener("touchend",function(e){
            endY = parseInt(e.changedTouches[0].pageY);
            if(endY - startY > 200 && (window.pageYOffset === 0 || document.documentElement.scrollTop === 0)){
                pullRefresh.innerHTML = "加载中";
                content.style.marginTop = "50px";
                pullRefresh.style.height = "50px";
                setTimeout(function(){
                    pullRefresh.innerHTML = "加载成功";
                    setTimeout(function(){
                        content.style.marginTop = "0";
                        pullRefresh.style.height = "0";
                    },1000)
                },2000);
            }else{
                console.log("下垃的幅度不够");
                content.style.marginTop = "0";
                pullRefresh.style.height = "0";
            }
        });