JQuery插件iScroll实现下拉刷新,滚动翻页特效
JQuery插件:iScroll
页面布局:
<divid="wrapper"> <divid="scroller"> <divid="pullDown"> <spanclass="pullDownIcon"></span><spanclass="pullDownLabel">下拉刷新...</span> </div> <ulid="thelist"> <li> <imgsrc="img/page1_img1.jpg"/> </li> <li> <imgsrc="img/page1_img2.jpg"/> </li> <li> <imgsrc="img/page1_img3.jpg"/> </li> <li> <imgsrc="img/page1_img1.jpg"/> </li> <li> <imgsrc="img/page1_img2.jpg"/> </li> <li> <imgsrc="img/page1_img3.jpg"/> </li> </ul> <divid="pullUp"> <spanclass="pullUpIcon"></span><spanclass="pullUpLabel">上拉加载更多...</span> </div> </div>
翻页,是通过ajax请求,把页码传入一般处理程序,在一般处理程序中获得分页后的数据返回json数组对象。
下拉刷新:
/** *下拉刷新(自定义实现此方法) *myScroll.refresh();//数据加载完成后,调用界面更新方法 */ functionpullDownAction(){ setTimeout(function(){ varel,li,i; el=document.getElementById('thelist'); //========================================== $.ajax({ type:"GET", url:"LoadMore.ashx", data:{page:generatedCount}, dataType:"json", success:function(data){ varjson=data; $(json).each(function(){ li=document.createElement('li'); //li.innerText='Generatedrow'+(++generatedCount); li.innerHTML='<imgsrc="'+this.src+'"/>'; el.insertBefore(li,el.childNodes[0]); }) } }); myScroll.refresh();//数据加载完成后,调用界面更新方法Remembertorefreshwhencontentsareloaded(ie:onajaxcompletion) },1000);//<--Simulatenetworkcongestion,removesetTimeoutfromproduction! }
上拉刷新
functionpullUpAction(){ setTimeout(function(){ varel,li,i; el=document.getElementById('thelist'); //========================================== $.ajax({ type:"GET", url:"LoadMore.ashx", data:{page:generatedCount}, dataType:"json", success:function(data){ varjson=data; $(json).each(function(){ li=document.createElement('li'); //li.innerText='Generatedrow'+(++generatedCount); li.innerHTML='<imgsrc="'+this.src+'"/>; el.insertBefore(li,el.childNodes[0]); }) } }); //============================================ myScroll.refresh();//数据加载完成后,调用界面更新方法Remembertorefreshwhencontentsareloaded(ie:onajaxcompletion) },1000);//<--Simulatenetworkcongestion,removesetTimeoutfromproduction! }
初始化
/** *初始化iScroll控件 */ functionloaded(){ pullDownEl=document.getElementById('pullDown'); pullDownOffset=pullDownEl.offsetHeight; pullUpEl=document.getElementById('pullUp'); pullUpOffset=pullUpEl.offsetHeight; myScroll=newiScroll('wrapper',{ scrollbarClass:'myScrollbar',/*重要样式*/ useTransition:false, topOffset:pullDownOffset, onRefresh:function(){ if(pullDownEl.className.match('loading')){ pullDownEl.className=''; pullDownEl.querySelector('.pullDownLabel').innerHTML='下拉刷新...'; }elseif(pullUpEl.className.match('loading')){ pullUpEl.className=''; pullUpEl.querySelector('.pullUpLabel').innerHTML='上拉加载更多...'; } }, onScrollMove:function(){ if(this.y>5&&!pullDownEl.className.match('flip')){ pullDownEl.className='flip'; pullDownEl.querySelector('.pullDownLabel').innerHTML='松手开始更新...'; this.minScrollY=0; }elseif(this.y<5&&pullDownEl.className.match('flip')){ pullDownEl.className=''; pullDownEl.querySelector('.pullDownLabel').innerHTML='下拉刷新...'; this.minScrollY=-pullDownOffset; }elseif(this.y<(this.maxScrollY-5)&&!pullUpEl.className.match('flip')){ pullUpEl.className='flip'; pullUpEl.querySelector('.pullUpLabel').innerHTML='松手开始更新...'; this.maxScrollY=this.maxScrollY; }elseif(this.y>(this.maxScrollY+5)&&pullUpEl.className.match('flip')){ pullUpEl.className=''; pullUpEl.querySelector('.pullUpLabel').innerHTML='上拉加载更多...'; this.maxScrollY=pullUpOffset; } }, onScrollEnd:function(){ if(pullDownEl.className.match('flip')){ pullDownEl.className='loading'; pullDownEl.querySelector('.pullDownLabel').innerHTML='加载中...'; pullDownAction();//Executecustomfunction(ajaxcall?) }elseif(pullUpEl.className.match('flip')){ pullUpEl.className='loading'; pullUpEl.querySelector('.pullUpLabel').innerHTML='加载中...'; pullUpAction();//Executecustomfunction(ajaxcall?) } } }); setTimeout(function(){document.getElementById('wrapper').style.left='0';},800); } //初始化绑定iScroll控件 document.addEventListener('touchmove',function(e){e.preventDefault();},false); document.addEventListener('DOMContentLoaded',loaded,false);