首頁  >  文章  >  web前端  >  iscroll.js的上拉下拉刷新時無法回彈的解決方法_javascript技巧

iscroll.js的上拉下拉刷新時無法回彈的解決方法_javascript技巧

WBOY
WBOY原創
2016-05-16 15:15:061088瀏覽

使用過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

下拉過程也可以同理分析。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn