共计 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";
}
});
正文完