以下是 jQuery手机端上拉下拉刷新页面代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<title>jQuery手机端上拉下拉刷新页面代码</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="reset.css"/>
<link rel="stylesheet" href="pullToRefresh.css"/>
<script src="iscroll.js"></script>
<script src="pullToRefresh.js"></script>
<script src="colorful.js"></script>
<style type="text/css" media="all">
body, html {
padding: 0;
margin: 0;
height: 100%;
font-family: Arial, Microsoft YaHei;
color: #111;
}
li {
/*border-bottom: 1px #CCC solid;*/
text-align: center;
line-height: 80px;
}
</style>
</head>
<body>
<!--must content ul li,or shoupi-->
<div id="wrapper">
<ul>
<li>row 10</li>
<li>row 9</li>
<li>row 8</li>
<li>row 7</li>
<li>row 6</li>
<li>row 5</li>
<li>row 4</li>
<li>row 3</li>
<li>row 2</li>
<li>row 1</li>
</ul>
</div>
<script>
for(var i=0;i<document.querySelectorAll("#wrapper ul li").length;i++){
document.querySelectorAll("#wrapper ul li")[i].colorfulBg(); }
refresher.init({
id:"wrapper",//<------------------------------------------------------------------------------------┐
pullDownAction:Refresh,
pullUpAction:Load
});
var generatedCount = 0;
function Refresh() {
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el =document.querySelector("#wrapper ul");
el.innerHTML='';
for (i=0; i<11; i++) {
li = document.createElement('li');
li.appendChild(document.createTextNode('async row ' + (++generatedCount)));
el.insertBefore(li, el.childNodes[0]);
}
wrapper.refresh();/****remember to refresh after action completed！ ---yourId.refresh(); ----| ****/
for(var i=0;i<document.querySelectorAll("#wrapper ul li").length;i++){
document.querySelectorAll("#wrapper ul li")[i].colorfulBg(); }
}, 1000);
}
function Load() {
setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el =document.querySelector("#wrapper ul");
for (i=0; i<2; i++) {
li = document.createElement('li');
li.appendChild(document.createTextNode('async row ' + (++generatedCount)));
el.appendChild(li, el.childNodes[0]);
}
wrapper.refresh();/****remember to refresh after action completed！！！ ---id.refresh(); --- ****/
for(var i=0;i<document.querySelectorAll("#wrapper ul li").length;i++){
document.querySelectorAll("#wrapper ul li")[i].colorfulBg(); }
}, 1000);
}
</script>
</body>
</html>
JS代码(pullToRefresh.mini.js):
eval(function(p,a,c,k,e,d){
e=function(c){
return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))}
;
if(!''.replace(/^/,String)){
while(c--){
d[e(c)]=k[c]||e(c)}
k=[function(e){
return d[e]}
];
e=function(){
return'\\w+'}
;
c=1}
;
while(c--){
if(k[c]){
p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}
}
return p}
('3 6={
b:{
G:"Q 1t H P...",13:"Z H P...",L:"Q 1f H W S...",11:"Z H W S...",M:"1k..."}
,1g:k(f){
3 v=8.1c(f.s);
3 d=8.j("d");
d.9="q";
v.g(d);
3 q=v.5(".q");
3 T=v.5("#"+f.s+" 1d");
q.Y(T,q.U[0]);
3 r=8.j("d");
r.9="r";
3 7=8.j("d");
7.9="7";
V(3 i=0;
i<4;
i++){
3 u=8.j("u");
7.g(u)}
r.g(7);
3 h=8.j("d");
h.9="h";
r.g(h);
q.Y(r,q.U[0]);
3 t=8.j("d");
t.9="t";
3 7=8.j("d");
7.9="7";
V(3 i=0;
i<4;
i++){
3 u=8.j("u");
7.g(u)}
t.g(7);
3 p=8.j("d");
p.9="p";
3 X=8.1q(6.b.L);
p.g(X);
t.g(p);
q.g(t);
3 2=v.5(".r");
3 A=2.F;
3 1=v.5(".t");
3 a=1.F;
1b.R(f,2,A,1,a)}
,R:k(f,2,A,1,a){
1h(f.s+"= 1e 1j(f.s,{
1i:1l,1u:10,1m:A,1s:k (){
6.18(2,1);
}
,1r:k (){
6.1a(1b,2,1,a);
}
,1v:k (){
6.14(2,f.K,1,f.E);
}
,}
)");
2.5(".h").n=6.b.G;
8.1p("1o",k(e){
e.1n()}
,10)}
,1a:k(e,2,1,a){
c(e.y>-a){
2.s="";
2.5(".h").n=6.b.G;
e.D=-a}
c(e.y>0){
2.l.I("o");
2.5(".h").n=6.b.13;
e.D=0}
c(e.C<e.B&&e.y<e.D-a||e.C>e.B&&e.y<e.15-a){
1.m.z="N";
1.l.I("o");
1.5(".p").n=6.b.11}
c(e.C<e.B&&e.y>e.D-a&&1.s.w("o")||e.C>e.B&&e.y>e.15-a&&1.s.w("o")){
2.l.O("o");
1.5(".p").n=6.b.L}
}
,18:k(2,1){
c(2.9.w("x")){
2.l.17("x");
2.5(".h").n=6.b.G;
2.5(".7").m.z="16";
2.m.J=2.F+"19"}
c(1.9.w("x")){
1.l.17("x");
1.5(".p").n=6.b.L;
1.5(".7").m.z="16";
1.m.J=1.F+"19"}
}
,14:k(2,K,1,E){
c(2.9.w("o")){
2.l.I("x");
2.l.O("o");
2.5(".h").n=6.b.M;
2.5(".7").m.z="N";
2.m.J="12";
c(K)K()}
c(1.9.w("o")){
1.l.I("x");
1.l.O("o");
1.5(".p").n=6.b.M;
1.5(".7").m.z="N";
1.m.J="12";
c(E)E()}
}
}
;
',62,94,'|pullUpEl|pullDownEl|var||querySelector|refresher|loader|document|className|pullUpOffset|info|if|div||parameter|appendChild|pullDownLabel||createElement|function|classList|style|innerHTML|flip|pullUpLabel|scroller|pullDown|id|pullUp|span|wrapper|match|loading||display|pullDownOffset|wrapperH|scrollerH|minScrollY|pullUpAction|offsetHeight|pullDownLable|to|add|lineHeight|pullDownAction|pullUpLable|loadingLable|block|remove|refresh|Pull|scrollIt|more|list|childNodes|for|load|content|insertBefore|Release|false|pullingUpLable|20px|pullingDownLable|onPulling|maxScrollY|none|toggle|onRelease|px|onScrolling|this|getElementById|ul|new|up|init|eval|useTransition|iScroll|Loading|true|topOffset|preventDefault|touchmove|addEventListener|createTextNode|onScrollMove|onRefresh|down|vScrollbar|onScrollEnd'.split('|'),0,{
}
))
分享到QQ
分享到微博
微信扫一扫
