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
ドロップダウンプロセスも同様に分析できます。