如何檢測拉到刷新

Question

有很多「拉到刷新」插件。我已經測試了5個。但他們沒有一個跑得快（尤其是在舊智能手機上）。

什麼是最好的（奶油用戶體驗性能和響應）的方式來檢查拉刷新？ PS：我不需要任何動畫。我只是想認識如果用戶「拉刷新」

Answer 1

性能只需要很少的代碼

插件和庫必須編寫得靈活，一般地，爲了解決很多相關問題。這意味着它們將永遠比你需要的體積更大，影響性能。這也意味着你永遠不必維護該代碼。這是折衷。

如果性能是您的目標，請自行構建。

因爲你需要的只是一個下拉檢測，建立一個簡單的滑動檢測器。 當然，您必須根據自己的需求以及您所定位的操作系統和瀏覽器的事件屬性，事件觸發器來調整它。

從我的舊js-minimal-swipe-detect

var pStart = {x: 0, y:0}; 
var pStop = {x:0, y:0}; 

function swipeStart(e) { 
    if (typeof e['targetTouches'] !== "undefined"){ 
     var touch = e.targetTouches[0]; 
     pStart.x = touch.screenX; 
     pStart.y = touch.screenY; 
    } else { 
     pStart.x = e.screenX; 
     pStart.y = e.screenY; 
    } 
} 

function swipeEnd(e){ 
    if (typeof e['changedTouches'] !== "undefined"){ 
     var touch = e.changedTouches[0]; 
     pStop.x = touch.screenX; 
     pStop.y = touch.screenY; 
    } else { 
     pStop.x = e.screenX; 
     pStop.y = e.screenY; 
    } 

    swipeCheck(); 
} 

function swipeCheck(){ 
    var changeY = pStart.y - pStop.y; 
    var changeX = pStart.x - pStop.x; 
    if (isPullDown(changeY, changeX)) { 
     alert('Swipe Down!'); 
    } 
} 

function isPullDown(dY, dX) { 
    // methods of checking slope, length, direction of line created by swipe action 
    return dY < 0 && (
     (Math.abs(dX) <= 100 && Math.abs(dY) >= 300) 
     || (Math.abs(dX)/Math.abs(dY) <= 0.3 && dY >= 60) 
    ); 
} 

document.addEventListener('touchstart', function(e){ swipeStart(e); }, false); 
document.addEventListener('touchend', function(e){ swipeEnd(e); }, false); 

Answer 2

簡體中有你厭倦了這些解決方案？ 你需要檢查這個fiddle

var mouseY = 0; 
var startMouseY = 0; 
$('body').on('mousedown', function (ev) { 
    mouseY = ev.pageY; 
    startMouseY = mouseY; 
    $(document).mousemove(function (e) { 
     if (e.pageY > mouseY) { 
      var d = e.pageY - startMouseY; 
      console.log("d: " + d); 
      if (d >= 200) 
       location.reload(); 
      $('body').css('margin-top', d/4 + 'px'); 
     } 
     else 
      $(document).unbind("mousemove"); 


    }); 
}); 
$('body').on('mouseup', function() { 
    $('body').css('margin-top', '0px'); 
    $(document).unbind("mousemove"); 
}); 
$('body').on('mouseleave', function() { 
    $('body').css('margin-top', '0px'); 
    $(document).unbind("mousemove"); 
}); 

，如果你正在尋找一些插件this plugin可以幫助你在什麼意義