H 5ドロップダウンリフレッシュとアップロード実現原理の浅い分析

原文リンク:justrockit.top
前言
モバイル端末H 5のウェブページでは、ドロップダウンリフレッシュとアップロードのより多くのデータのインタラクションが頻繁に発生し、オープンソースコミュニティにもiscroll、pulltorefreshなどの類似の解決策がたくさんある.jsライブラリなど.以下に、この2つの一般的なインタラクションの基本的な実現原理について説明する.
実装の原理
ドロップダウン・リフレッシュ
ドロップダウン・リフレッシュを実現するには、主に3つのステップに分けられます.

は、原生touchstartイベントを傍受し、その初期位置の値、e.touches[0].pageYを記録する.

原生touchmoveイベントを傍受し、現在のスライドの位置値と初期位置値との差を記録して計算し、0より大きい値は下向きに引っ張ることを示し、CSS 3のtranslateY属性を利用して要素をジェスチャーに従って下向きにスライドさせることに対応する差を設定するとともに、スライドを許容する最大値を設定しなければならない.

は、原生touchendイベントをリスニングし、このとき要素が最大値にスライドするとcallbackがトリガーされ、同時にtranslateYを0にリセットし、要素は初期位置に戻る.

例.リンクを表示:ドロップダウンdemoをリフレッシュ(PCブラウザは携帯電話シミュレータモードに変更して表示する必要があります)
html

    

    

        
111
        
222
        
333
        
444
        
555
        ...
    

javascript

(function(window) {
    var _element = document.getElementById('refreshContainer'),
      _refreshText = document.querySelector('.refreshText'),
      _startPos = 0,
      _transitionHeight = 0;

    _element.addEventListener('touchstart', function(e) {
        console.log('    ：', e.touches[0].pageY);
        _startPos = e.touches[0].pageY;
        _element.style.position = 'relative';
        _element.style.transition = 'transform 0s';
    }, false);
    
    _element.addEventListener('touchmove', function(e) {
        console.log('    ：', e.touches[0].pageY);
        _transitionHeight = e.touches[0].pageY - _startPos;
        
        if (_transitionHeight > 0 && _transitionHeight < 60) {
            _refreshText.innerText = '    ';
            _element.style.transform = 'translateY('+_transitionHeight+'px)';

            if (_transitionHeight > 55) {
              _refreshText.innerText = '    ';
            }
        }                
    }, false);

    _element.addEventListener('touchend', function(e) {
        _element.style.transition = 'transform 0.5s ease 1s';
        _element.style.transform = 'translateY(0px)';
        _refreshText.innerText = '   ...';

        // todo...

    }, false);
})(window);

ドロップダウンして手を放す過程で、3つの状態を経験しました.

現在のジェスチャースライド位置と初期位置の差が0より大きい場合、ドロップダウンリフレッシュ操作を行っていることを示す.

が一定値にドロップダウンすると、手を放した後の操作ヒントが表示されます.

プルダウンが設定最大値に達して手を放すと、コールバックが実行され、更新操作が行われていることを示す.

プルアップロード
より多くのデータをアップロードするのは、ページがスクロールするときにトリガーされる動作で、一般的にはページが最後までスクロールするときにトリガーされるか、一定の位置までスクロールするときにトリガーされるかを選択することができます.
ページの下部にスクロールする例を示します.実現原理は、現在のスクロールバーのscrollTop値、現在の可視範囲の高さclientHeight、およびドキュメントの総高さscrollHeightをそれぞれ得ることである.scrollTopおよびclientHeightの値の和がscrollHeight以上である場合、callbackがトリガーされる.
例.リンクの表示:demoのアップロードdemo
html

    

        
111
        
222
        
333
        
444
        
555
        ...
    
    

(function(window) {
    //            
    function getScrollTop() { 
        var scrollTop = 0; 
        if (document.documentElement && document.documentElement.scrollTop) { 
            scrollTop = document.documentElement.scrollTop; 
        } else if (document.body) { 
            scrollTop = document.body.scrollTop; 
        } 
        return scrollTop; 
    } 
    
    //             
    function getClientHeight() { 
        var clientHeight = 0; 
        if (document.body.clientHeight && document.documentElement.clientHeight) { 
            clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); 
        } 
        else { 
            clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); 
        } 
        return clientHeight; 
    } 
    
    //           
    function getScrollHeight() { 
        return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 
    }
    
    var _text = document.querySelector('.refreshText'),
      _container = document.getElementById('refreshContainer');
    
    //     
    var throttle = function(method, context){
      clearTimeout(method.tId);
      method.tId = setTimeout(function(){
        method.call(context);
      }, 300);
    }
    
    function fetchData() {
        setTimeout(function() {
            _container.insertAdjacentHTML('beforeend', '
new add...
');
        }, 1000);
    }
    
    window.onscroll = function() {
      if (getScrollTop() + getClientHeight() == getScrollHeight()) {
          _text.innerText = '   ...';
          throttle(fetchData);
      }
    };

})(window);

ページバインドonscrollイベントには、スクロールバーの300ミリ秒以内の連続した複数回のトリガを無視する役割を果たすスロットル関数が追加されます.
小結
アップフラッシュの実現は主にtouchイベントの3段階に依存し、CSS 3アニメーション効果を利用する.ドロップダウンロードは主にページのonscrollイベントに依存し、ページスクロール時に関数スロットルを考慮する必要があることに注意してください.