Jak wykrywać Pull, aby odświeżyć

Question

Istnieje wiele wtyczek "pull to refresh". Przetestowałem już 5 z nich. Ale żaden z nich nie działa szybko (zwłaszcza na starych smartfonach).

Jaka jest najlepsza (maślana wydajność i responsywność UX) sposób sprawdzenia, czy pull się odświeża?

PS: Nie potrzebuję żadnej animacji. Chcę tylko, aby rozpoznać, czy użytkownik „pull odświeżyć”

Answer 1

Wydajność wymaga minimalnej kod

wtyczek i bibliotek muszą być pisane być tak elastyczne i ogólnie jak to możliwe, aby rozwiązać wiele problemów związanych. Oznacza to, że zawsze będą bardziej masywne niż potrzebujesz, wpływając na wydajność. Oznacza to również, że nigdy nie będziesz musiał utrzymywać tego kodu. To jest kompromis.

Jeśli wydajność jest Twoim celem, zbuduj ją samodzielnie.

Ponieważ WSZYSTKIE, czego potrzebujesz, to wykrywanie rozwijania, zbuduj prosty czujnik przesunięcia. Oczywiście, musisz dostosować to do swoich potrzeb, a także właściwości zdarzeń, wyzwalaczy zdarzeń systemu operacyjnego i przeglądarki, na które kierujesz.

Uproszczone z moim starym 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

masz zmęczony te rozwiązania ?? Trzeba sprawdzić to 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"); 
}); 

i jeśli szukasz jakiegoś pluginu this plugin może pomóc