下拉刷新
Posted 张云山
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了下拉刷新相关的知识，希望对你有一定的参考价值。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
<title>下拉刷新</title>
</head>
<body style="margin: 0">
<div class="a" style="padding-top:100px;background-color: #00bcd4; height: 200px;">
<div>dsfsdf</div>
</div>
<style>
.TouchSX{
}
</style>
<script>
TouchFun({obj:".a"},function(){
alert(1);
});
// TouchFun({
// obj:对象
// h:下拉距离
// },function(){
// 回调函数
// })
function TouchFun(parameter,fn){
var win = window,touch,YA,YB,obj,objCss,pa,pos,TimeFun,index,h;
if(parameter["h"] == undefined){
h = 150;//默认下拉距离
};
var TouchFun = {
a:function(e){
touch = TouchFun.touch(e,0);
YA = touch.pageY;
obj = document.querySelector(parameter.obj);//对象
objCss = getComputedStyle(obj,null);
pa = parseInt(objCss.paddingTop.replace(/px/ig,""));
pos = objCss.position;
if(pos != "absolute" && pos != "fixed" && pos != "relative"){
obj.style.position = "relative";
};
var div = document.createElement("div");//创建div（下拉信息提示）
var divcss = div.style;
div.className = "TouchSX";
div.innerHTML = "正在刷新";
divcss.textAlign = "center";
divcss.lineHeight = "40px";
divcss.fontFamily = "微软雅黑";
divcss.fontSize = "14px";
divcss.position = "absolute";
divcss.width = "100%";
divcss.left = 0;
divcss.top = 0;
divcss.color = "#fff";
divcss.display = "none";
divcss.backgroundColor = "rgba(0,0,0,0.3)";
obj.insertBefore(div,obj.childNodes[0]);
},
b:function(e){
if(parseInt(objCss.paddingTop.replace(/px/ig,"")) == pa && YB > 0){
document.querySelector(".TouchSX").style.display = "block";
e.preventDefault();
}
touch = TouchFun.touch(e,0);
YB = Math.ceil(touch.pageY - YA);
if(YB > 15){
document.querySelector(".TouchSX").innerHTML = "松开刷新";
obj.style.paddingTop = pa+YB+"px";
};
},
c:function(e){
index = YB;
document.querySelector(".TouchSX").innerHTML = "加载中...";
TimeFun = setInterval(function(){
if(index > pa){
index -- ;
obj.style.paddingTop = index+"px";
if(YB >= h){
document.querySelector(".TouchSX").innerHTML = "加载成功";
};
}else{
clearInterval(TimeFun);
obj.style.paddingTop = pa+"px";
obj.removeChild(document.querySelector(".TouchSX"));
if(YB >= h && fn != undefined){
fn(".TouchSX");
};
};
},30 - (YB-h));
},
touch:function(e,index){
return e.targetTouches[index];
}
};
win.addEventListener("touchstart",TouchFun.a);
win.addEventListener("touchmove",TouchFun.b);
win.addEventListener("touchend",TouchFun.c);
}
</script>
</body>
</html>
以上是关于下拉刷新的主要内容，如果未能解决你的问题，请参考以下文章