iscroll动态加载数据完美解决方法

2024-01-27 20:00:02 55

//iScroll滚动条/上拉刷新/下拉加载 varmyScroll, pullDownEl, pullDownOffset, pullUpEl, pullUpOffset; functionloaded(){ pullDownEl=document.getElementById('pullDown'); pullDownOffset=pullDownEl.offsetHeight; pullUpEl=document.getElementById('pullUp'); pullUpOffset=pullUpEl.offsetHeight; myScroll=newiScroll('wrapper',{ useTransition:false, topOffset:pullDownOffset, btnOffset:pullUpOffset, hideScrollbar:true, fadeScrollbar:true, onRefresh:function(){ if(pullDownEl.className.match('loading')){ pullDownEl.className=''; //pullDownEl.querySelector('.pullDownLabel').innerHTML='下拉刷新...'; pullDownEl.querySelector('.pullDownLabel').innerHTML='数据更新时间：'+updateDatetime; }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='释放刷新...'; pullDownEl.querySelector('.pullDownLabel').innerHTML='数据更新时间：'+updateDatetime; this.minScrollY=0; }elseif(this.y<5&&pullDownEl.className.match('flip')){ pullDownEl.className=''; //pullDownEl.querySelector('.pullDownLabel').innerHTML='下拉刷新...'; pullDownEl.querySelector('.pullDownLabel').innerHTML='数据更新时间：'+updateDatetime; this.minScrollY=-pullDownOffset; }elseif(this.y<(this.maxScrollY-pullUpOffset-40)&&!pullUpEl.className.match('flip')){ pullUpEl.className='flip'; pullUpEl.querySelector('.pullUpLabel').innerHTML='释放加载...'; this.maxScrollY=this.maxScrollY-pullUpOffset; } //elseif(this.y>(this.maxScrollY-pullUpOffset)&&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='数据刷新中...'; pullDownEl.querySelector('.pullDownLabel').innerHTML='数据更新时间：'+updateDatetime; myScroll.refresh(); }elseif(pullUpEl.className.match('flip')){ pullUpEl.className='loading'; pullUpEl.querySelector('.pullUpLabel').innerHTML='数据加载中...'; setTimeout(function(){myScroll.refresh();},3000); } } }); } document.addEventListener('touchmove',function(e){e.preventDefault();},false); document.addEventListener('DOMContentLoaded',function(){setTimeout(loaded,200);},false);

/*iScroll*/ #wrapper{width:100%;position:absolute;top:0;bottom:0;z-index:1;overflow:hidden;} #scroller{ width:100%;position:absolute;z-index:1; -webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0); } #pullDown, #pullUp{padding:15px015px60px;font-size:14px;line-height:27px;color:#303030;} #pullDown{background:url(../images/loadBottom.png)no-repeat30pxcenter;background-size:27px27px;} #pullUp{background:url(../images/loadTop.png)no-repeat30pxcenter;background-size:27px27px;} #pullDown.flip{background:url(../images/loadTop.png)no-repeat30pxcenter;background-size:27px27px;} #pullUp.flip{background:url(../images/loadBottom.png)no-repeat30pxcenter;background-size:27px27px;} #pullDown.loading, #pullUp.loading{background:url(../images/loading.gif)no-repeat30pxcenter;background-size:25px27px;} /*iScrollend*/

iscroll动态加载数据完美解决方法

热门推荐

随机推荐