下拉刷新
<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"; } });