首 页最新软件下载排行文章资讯投稿发布下载专题
维维下载站
您的位置:首页编程开发网络编程编程其它 → iscroll.js上拉下拉刷新时无法回弹问题怎么解决办法

iscroll.js上拉下拉刷新时无法回弹问题怎么解决办法

来源:本站整理 发布时间:2016-2-18 8:54:25 人气:

相信只要使用过iscroll.js的上拉下拉刷新效果的人应该都碰到过这样的一个问题:在iOS的浏览器中,上拉或下拉刷新的时候,当手指划出屏幕以后,页面居然无法弹回了。不少人因为解决不了此问题,所以干脆就那样不解决了,还有人直接就不用HTML,使用原生代替了HTML页面了。

可能许多朋友也有自己的解决方法,只是没有发布出来,因此网上也找不到解决方案。在不少QQ群中也有不少人在问到底应该如何解决这一问题,因此本人写了这一篇文章记录一下本人解决方案,希望对有此的一些朋友有所帮助吧。

上拉下拉刷新的主要代码为:

myScroll = new iScroll('wrapper', {
  vScrollbar: false,
  useTransition: true,
  topOffset: pullDownOffset,
  onRefresh: function () {
   if (pullDownEl.className.match('loading')) {
    pullDownEl.className = '';
    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
   } else if (pullUpEl.className.match('loading')) {
    pullUpEl.className = '';
    pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
   }
  },
  onScrollMove: function () {
   if (this.y > 5 && !pullDownEl.className.match('flip')) {
    pullDownEl.className = 'flip';
    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
    this.minScrollY = 0;
   } else if (this.y < 5 && pullDownEl.className.match('flip')) {
    pullDownEl.className = '';
    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
    this.minScrollY = -pullDownOffset;
   } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
    pullUpEl.className = 'flip';
    pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
    this.maxScrollY = this.maxScrollY;
   } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
    pullUpEl.className = '';
    pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
    this.maxScrollY = pullUpOffset;
   }
  },
  onScrollEnd: function () {
   if (pullDownEl.className.match('flip')) {
    pullDownEl.className = 'loading';
    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
    pullDownAction();
   } else if (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;
   } else if (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),页面就开始回弹。

下拉过程也是一样的道理。

相关下载
栏目导航
本类热门阅览