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);