Comment détecter Tirer pour rafraîchir

Question

Il existe de nombreux plugins "pull to refresh". J'ai déjà testé 5 d'entre eux. Mais aucun d'eux ne tourne vite (surtout sur les vieux smartphones).

Quelle est la meilleure façon (performance et réactivité de l'UX au beurrateur) de vérifier si l'actualisation est effectuée? PS: Je n'ai pas besoin d'animation.

PS: Je n'ai pas besoin d'animation. Je veux juste reconnaître si un utilisateur « tirer pour rafraîchir »

Answer 1

Performance nécessite un minimum de code

Plugins et les bibliothèques doivent être pour être aussi flexible et générale que possible, afin de résoudre de nombreux problèmes connexes. Cela signifie qu'ils seront toujours plus volumineux que nécessaire, ce qui aura une incidence sur les performances. Cela signifie également que vous n'aurez jamais à maintenir ce code. C'est le compromis.

Si la performance est votre objectif, construisez-le vous-même.

Puisque TOUT ce dont vous avez besoin est une détection par pull-down, construisez un simple détecteur de balayage. Bien sûr, vous devrez l'adapter à vos besoins et aux propriétés de l'événement, aux déclencheurs d'événements du système d'exploitation et du navigateur que vous ciblez.

simplifié de mon ancien 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

avez-vous fatigué ces solutions ?? Vous devez vérifier 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"); 
}); 

et si vous êtes à la recherche pour certains plug-in this plugin peut vous aider