iscroll实现下拉刷新功能
本文实例为大家分享了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