关于html:原生下拉刷新

78次阅读

共计 1032 个字符,预计需要花费 3 分钟才能阅读完成。

下拉刷新

 <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";
            }
        });

正文完
 0