iscroll.js的上拉下拉刷新时无法回弹的解决方法
使用过iscroll.js的上拉下拉刷新效果的朋友应该都碰到过这个问题:在iOS的浏览器中,上拉或下拉刷新时,当手指划出屏幕后,页面无法弹回。很多人因为解决不了这个问题,干脆就那样不解决了,还有的直接就不用HTML了,使用原生代替HTML页面。
相信很多朋友也有自己的解决办法,只是没写出来,所以网上都搜不到解决方案。在很多QQ群里面也有很多人在问该怎么解决这个问题,所以我写这篇文章记录一下我的解决方案,希望对一些朋友有所帮助。
上拉下拉刷新的主要代码:
myScroll=newiScroll('wrapper',{ vScrollbar:false, 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(); }elseif(pullUpEl.className.match('flip')){ pullUpEl.className='loading'; pullUpEl.querySelector('.pullUpLabel').innerHTML='Loading...'; pullUpAction(); } } });
页面无法弹回的原因在于:手指划出屏幕后touchend事件无法触发,回弹动画就无法执行。解决办法就是:当手指接近屏幕边缘的时候,手动触发动画方法。
在onScrollMove方法中插入判断代码:
onScrollMove:function(){ if((this.y<this.maxScrollY)&&(this.pointY<1)){ this.scrollTo(0,this.maxScrollY,400); return; }elseif(this.y>0&&(this.pointY>window.innerHeight-1)){ this.scrollTo(0,0,400); return; } ...... }
下面解释一下这段代码的意思。
this.y是页面已经滚动的垂直距离,this.maxScrollY是最大垂直滚动距离,this.pointY手指当前的垂直坐标。
当this.y<this.maxScrollY,就是已经处于上拉的过程,当(this.y<this.maxScrollY)&&(this.pointY<1)时,处于上拉且手指已经触及屏幕边缘,这时候手动触发this.scrollTo(0,this.maxScrollY,400),页面就开始回弹。
下拉过程也可以同理分析。