如何检测拉到刷新

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可以帮助你在什么意义