iscroll实现下拉刷新功能

2024-01-27 16:10:03 60

本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下

版本号：iscroll4.2.5.js

iscroll版本很有关系在线：demo链接有出现白屏的bug,将iscroll版本改成iscroll4.2.5就可以了

html








iScrolldemo:simple





varmyScroll,
pullDownEl,pullDownOffset,
pullUpEl,pullUpOffset,
generatedCount=0;

functionpullDownAction(){
setTimeout(function(){//<--Simulatenetworkcongestion,removesetTimeoutfromproduction!
varel,li,i;
el=document.getElementById('thelist');

for(i=0;i<3;i++){
li=document.createElement('li');
li.innerText='Generatedrow'+(++generatedCount);
el.insertBefore(li,el.childNodes[0]);
}

myScroll.refresh();//Remembertorefreshwhencontentsareloaded(ie:onajaxcompletion)
},1000);//<--Simulatenetworkcongestion,removesetTimeoutfromproduction!
}

functionpullUpAction(){
setTimeout(function(){//<--Simulatenetworkcongestion,removesetTimeoutfromproduction!
varel,li,i;
el=document.getElementById('thelist');

for(i=0;i<3;i++){
li=document.createElement('li');
li.innerText='Generatedrow'+(++generatedCount);
el.appendChild(li,el.childNodes[0]);
}

myScroll.refresh();//Remembertorefreshwhencontentsareloaded(ie:onajaxcompletion)
},1000);//<--Simulatenetworkcongestion,removesetTimeoutfromproduction!
}

functionloaded(){
pullDownEl=document.getElementById('pullDown');
pullDownOffset=pullDownEl.offsetHeight;
pullUpEl=document.getElementById('pullUp');
pullUpOffset=pullUpEl.offsetHeight;

myScroll=newiScroll('wrapper',{
useTransition:true,
topOffset:pullDownOffset,
onRefresh:function(){
if(pullDownEl.className.match('loading')){
pullDownEl.className='';
pullDownEl.querySelector('.pullDownLabel').innerHTML='Pulldowntorefresh...';
}elseif(pullUpEl.className.match('loading')){
pullUpEl.className='';
pullUpEl.querySelector('.pullUpLabel').innerHTML='Pulluptoloadmore...';
}
},
onScrollMove:function(){
if(this.y>5&&!pullDownEl.className.match('flip')){
pullDownEl.className='flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML='Releasetorefresh...';
this.minScrollY=0;
}elseif(this.y<5&&pullDownEl.className.match('flip')){
pullDownEl.className='';
pullDownEl.querySelector('.pullDownLabel').innerHTML='Pulldowntorefresh...';
this.minScrollY=-pullDownOffset;
}elseif(this.y<(this.maxScrollY-5)&&!pullUpEl.className.match('flip')){
pullUpEl.className='flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML='Releasetorefresh...';
this.maxScrollY=this.maxScrollY;
}elseif(this.y>(this.maxScrollY+5)&&pullUpEl.className.match('flip')){
pullUpEl.className='';
pullUpEl.querySelector('.pullUpLabel').innerHTML='Pulluptoloadmore...';
this.maxScrollY=pullUpOffset;
}
},
onScrollEnd:function(){
if(pullDownEl.className.match('flip')){
pullDownEl.className='loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML='Loading...';
pullDownAction();//Executecustomfunction(ajaxcall?)
}elseif(pullUpEl.className.match('flip')){
pullUpEl.className='loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML='Loading...';
pullUpAction();//Executecustomfunction(ajaxcall?)
}
}
});

setTimeout(function(){document.getElementById('wrapper').style.left='0';},800);
}

document.addEventListener('touchmove',function(e){e.preventDefault();},false);

document.addEventListener('DOMContentLoaded',function(){setTimeout(loaded,200);},false);



body,ul,li{
padding:0;
margin:0;
border:0;
}

body{
font-size:12px;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
font-family:helvetica;
}

#header{
position:absolute;z-index:2;
top:0;left:0;
width:100%;
height:45px;
line-height:45px;
background-color:#d51875;
background-image:-webkit-gradient(linear,00,0100%,color-stop(0,#fe96c9),color-stop(0.05,#d51875),color-stop(1,#7b0a2e));
background-image:-moz-linear-gradient(top,#fe96c9,#d518755%,#7b0a2e);
background-image:-o-linear-gradient(top,#fe96c9,#d518755%,#7b0a2e);
padding:0;
color:#eee;
font-size:20px;
text-align:center;
}

#headera{
color:#f3f3f3;
text-decoration:none;
font-weight:bold;
text-shadow:0-1px0rgba(0,0,0,0.5);
}

#footer{
position:absolute;z-index:2;
bottom:0;left:0;
width:100%;
height:48px;
background-color:#222;
background-image:-webkit-gradient(linear,00,0100%,color-stop(0,#999),color-stop(0.02,#666),color-stop(1,#222));
background-image:-moz-linear-gradient(top,#999,#6662%,#222);
background-image:-o-linear-gradient(top,#999,#6662%,#222);
padding:0;
border-top:1pxsolid#444;
}

#wrapper{
position:absolute;z-index:1;
top:45px;bottom:48px;left:-9999px;
width:100%;
background:#aaa;
overflow:auto;
}

#scroller{
position:absolute;z-index:1;
/*-webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:100%;
padding:0;
}

#scrollerul{
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}

#scrollerli{
padding:010px;
height:40px;
line-height:40px;
border-bottom:1pxsolid#ccc;
border-top:1pxsolid#fff;
background-color:#fafafa;
font-size:14px;
}

#myFrame{
position:absolute;
top:0;left:0;
}



/**
*
*Pulldownstyles
*
*/
#pullDown,#pullUp{
background:#fff;
height:40px;
line-height:40px;
padding:5px10px;
border-bottom:1pxsolid#ccc;
font-weight:bold;
font-size:14px;
color:#888;
}
#pullDown.pullDownIcon,#pullUp.pullUpIcon{
display:block;float:left;
width:40px;height:40px;
background:url(pull-icon@2x.png)00no-repeat;
-webkit-background-size:40px80px;background-size:40px80px;
-webkit-transition-property:-webkit-transform;
-webkit-transition-duration:250ms;
}
#pullDown.pullDownIcon{
-webkit-transform:rotate(0deg)translateZ(0);
}
#pullUp.pullUpIcon{
-webkit-transform:rotate(-180deg)translateZ(0);
}

#pullDown.flip.pullDownIcon{
-webkit-transform:rotate(-180deg)translateZ(0);
}

#pullUp.flip.pullUpIcon{
-webkit-transform:rotate(0deg)translateZ(0);
}

#pullDown.loading.pullDownIcon,#pullUp.loading.pullUpIcon{
background-position:0100%;
-webkit-transform:rotate(0deg)translateZ(0);
-webkit-transition-duration:0ms;

-webkit-animation-name:loading;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
}

@-webkit-keyframesloading{
from{-webkit-transform:rotate(0deg)translateZ(0);}
to{-webkit-transform:rotate(360deg)translateZ(0);}
}





iScroll

Pulldowntorefresh...

Prettyrow1

Prettyrow2

Prettyrow3

Prettyrow4

Prettyrow5

Prettyrow6

Prettyrow7

Prettyrow8

Prettyrow9

Prettyrow10

Prettyrow11

Prettyrow12

Prettyrow13

Prettyrow14

Prettyrow15

Prettyrow16

Prettyrow17

Prettyrow18

Prettyrow19

Prettyrow20

Prettyrow21

Prettyrow22

Prettyrow23

Prettyrow24

Prettyrow25

Prettyrow26

Prettyrow27

Prettyrow28

Prettyrow29

Prettyrow30

Prettyrow31

Prettyrow32

Prettyrow33

Prettyrow34

Prettyrow35

Prettyrow36

Prettyrow37

Prettyrow38

Prettyrow39

Prettyrow40

Pulluptorefresh...

iscroll实现下拉刷新功能

热门推荐

随机推荐