2017-09-13 56 views
9

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).Jak wykrywać Pull, aby odświeżyć

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ć”

+0

'nie są uruchomione fast' w jakim sensie? nie ciągnąć wystarczająco często? przeciąganie trwa zbyt długo? jeśli to drugie, istnieje szansa, że ​​sprzęt to problem. –

+0

Szarpie zawsze trochę. Nie w 100% rodzime uczucie. – Peter

+0

Jeśli chcesz, aby nie dostać się do większego kodu, możesz zaimplementować listę gestów przeciągnięcia – GeekWithGlasses

Odpowiedz

4

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); 
+0

. Myślę, że właśnie to szukam. Ale pojawia się błąd "abs nie jest zdefiniowany":/ – Peter

+2

@Peter zmienić 'abs()' na 'Math.abs()' –

+0

@KScandrett, dzięki za to. Zły nadzór z mojej strony. –

0

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

+0

@ mr-pyramid, większość urządzeń mobilnych nie rejestruje żadnych zdarzeń "myszy **" dla dotyku. Może to działać dobrze na komputerach stacjonarnych i laptopach, z lub bez dotyku, ale nie będzie działać na urządzeniach z Androidem, iOS lub WinPhone. –

+0

czy Twoja odpowiedź rozwiązuje problemy z Androidem i urządzeniami mobilnymi? –

+1

To powinno działać na większości urządzeń mobilnych, ale oryginalny (bardziej obszerny) kod, z którego stworzyłem to rozwiązanie, został przetestowany tylko na 2 przeglądarkach w Androidzie, 5 na PC i 2 na Macu. Twoje rozwiązanie _ nie będzie działać z DOWOLNYM działaniem dotykowym_, z powodu którego OP chciał poprosić o rozwiązanie. –