refresh_javascript スキルのプルダウン時に isscroll.js がリバウンドできない問題の解決策-jsチュートリアル-php.cn

refresh_javascript スキルのプルダウン時に isscroll.js がリバウンドできない問題の解決策

WBOY

リリース： 2016-05-16 15:15:06

オリジナル

1114 人が閲覧しました

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

ドロップダウンプロセスも同様に分析できます。