2013-02-26 12 views
36

Ich habe eine Anwendung in AngularJS gemacht, die Pfeil-Navigation hat, um Ansichten zu wechseln.Wie werden Wischgesten für mobile Geräte implementiert?

Ich möchte diese Navigation mit Swipe für Touch-Geräte implementieren. Ich versuchte jGestures Bibliothek, aber es geht nicht gut mit Swipe. Ich wurde empfohlen, jquery mobile NICHT zu verwenden.

Gibt es eine andere Möglichkeit, Swipe zu implementieren?

EDIT: Es wird nicht sauber wischen. Ich habe es auf mehreren Geräten getestet, einschließlich iPad, und es bedarf mehrerer Swipes, um eine Aktion auszuführen (Routing in meinem Fall).

+0

Vielleicht möchten Sie die Probleme, die Sie mit jGestures hatten, näher erläutern. Ich habe es selbst nicht benutzt, aber es sieht wie eine robuste Version von benutzerdefiniertem Code aus, den ich für einfache Gestenunterstützung geschrieben habe (und anderswo gesehen habe). –

+0

Hinzugefügt in Bearbeitung. – fotuzlab

+0

"Ich wurde empfohlen, JQuery Mobile NICHT zu verwenden." Warum? – givanse

Antwort

23

Haben Sie Hammerjs ausprobiert? Es unterstützt Swipe-Gesten mit der Geschwindigkeit der Berührung. http://eightmedia.github.com/hammer.js/

+0

Ich benutzte http://quojs.tapquo.com/. Es hat gut funktioniert. Habe viele positive Kommentare über HammerJS gehört, würde das in einem anderen Projekt versuchen. Vielen Dank für Ihre Antwort. – fotuzlab

+0

Ich schrieb eine einfache Serviceverpackung von Hammerjs. Funktioniert hervorragend mit Angular. –

+0

Danke für die Empfehlung! hammerjs arbeitet mit der aktuellen Version von JQuery, ohne jquery.mobile migrieren zu müssen. Keine Warnungen, keine Fehler. NETT! –

33

Ich habe diese Funktion für meine Bedürfnisse.

Fühlen Sie sich frei, es zu benutzen. Funktioniert hervorragend auf mobilen Geräten.

function detectswipe(el,func) { 
    swipe_det = new Object(); 
    swipe_det.sX = 0; swipe_det.sY = 0; swipe_det.eX = 0; swipe_det.eY = 0; 
    var min_x = 30; //min x swipe for horizontal swipe 
    var max_x = 30; //max x difference for vertical swipe 
    var min_y = 50; //min y swipe for vertical swipe 
    var max_y = 60; //max y difference for horizontal swipe 
    var direc = ""; 
    ele = document.getElementById(el); 
    ele.addEventListener('touchstart',function(e){ 
    var t = e.touches[0]; 
    swipe_det.sX = t.screenX; 
    swipe_det.sY = t.screenY; 
    },false); 
    ele.addEventListener('touchmove',function(e){ 
    e.preventDefault(); 
    var t = e.touches[0]; 
    swipe_det.eX = t.screenX; 
    swipe_det.eY = t.screenY;  
    },false); 
    ele.addEventListener('touchend',function(e){ 
    //horizontal detection 
    if ((((swipe_det.eX - min_x > swipe_det.sX) || (swipe_det.eX + min_x < swipe_det.sX)) && ((swipe_det.eY < swipe_det.sY + max_y) && (swipe_det.sY > swipe_det.eY - max_y) && (swipe_det.eX > 0)))) { 
     if(swipe_det.eX > swipe_det.sX) direc = "r"; 
     else direc = "l"; 
    } 
    //vertical detection 
    else if ((((swipe_det.eY - min_y > swipe_det.sY) || (swipe_det.eY + min_y < swipe_det.sY)) && ((swipe_det.eX < swipe_det.sX + max_x) && (swipe_det.sX > swipe_det.eX - max_x) && (swipe_det.eY > 0)))) { 
     if(swipe_det.eY > swipe_det.sY) direc = "d"; 
     else direc = "u"; 
    } 

    if (direc != "") { 
     if(typeof func == 'function') func(el,direc); 
    } 
    direc = ""; 
    swipe_det.sX = 0; swipe_det.sY = 0; swipe_det.eX = 0; swipe_det.eY = 0; 
    },false); 
} 

function myfunction(el,d) { 
    alert("you swiped on element with id '"+el+"' to "+d+" direction"); 
} 

Um die Funktion es genau wie

detectswipe('an_element_id',myfunction); 

detectswipe('an_other_element_id',my_other_function); 

verwenden verwenden Wenn ein Swipe die Funktion "myfunction" erfasst wird, wird mit dem Parameter Element-ID und "l, r, u, d" bezeichnet (links rechts hoch runter).

Beispiel: http://jsfiddle.net/rvuayqeo/1/

+0

Danke. Ich würde empfehlen, 'min_x' dynamisch zu setzen: 'min_x = Math.abs (swipe_det.eY - swipe_det.sY)'. Analog für andere Richtung. Wenn du 400 Pixel hoch und nur 40 Pixel nach rechts wischst, solltest du wahrscheinlich nach oben wischen. Ihr Code erkennt jedoch einen rechten Swipe. – Sadik

+1

@EscapeNetscape Ich mag Ihre Lösung zu Wischen Erkennung. Aber es identifiziert falsch einzelne und doppelte Antippen als Swipes. Wie würde ich das beheben? – theJollySin

3

Die einfachste Lösung, die ich gefunden habe, die kein Plugin givanse's answer auf eine ähnliche Frage ist nicht erforderlich:

document.addEventListener('touchstart', handleTouchStart, false);   
document.addEventListener('touchmove', handleTouchMove, false); 

var xDown = null;               
var yDown = null;               

function handleTouchStart(evt) {           
    xDown = evt.touches[0].clientX;          
    yDown = evt.touches[0].clientY;          
}; 



function handleTouchMove(evt) { 
    if (! xDown || ! yDown) { 
     return; 
    } 

var xUp = evt.touches[0].clientX;          
var yUp = evt.touches[0].clientY; 

var xDiff = xDown - xUp; 
var yDiff = yDown - yUp; 

if (Math.abs(xDiff) > Math.abs(yDiff)) {/*most significant*/ 
    if (xDiff > 0) { 
     /* left swipe */ 
    } else { 
     /* right swipe */ 
    }      
} else { 
    if (yDiff > 0) { 
     /* up swipe */ 
    } else { 
     /* down swipe */ 
    }                 
} 
/* reset values */ 
xDown = null; 
yDown = null;            
}; 
1

Hammer Zeit!

Ich habe Hammer JS verwendet und es funktioniert mit Gesten. Lesen Sie Details von hier: https://hammerjs.github.io/

Gut, dass es viel leichter und schneller als jQuery mobile ist. Sie können es auch auf ihrer Website testen.

0

Ich mag Ihre Lösung und implementiert sie auf meiner Website - jedoch mit ein paar kleinen Verbesserungen.Ich wollte nur meinen Code teilen:

function detectSwipe(id, f) { 
    var detect = { 
     startX: 0, 
     startY: 0, 
     endX: 0, 
     endY: 0, 
     minX: 30, // min X swipe for horizontal swipe 
     maxX: 30, // max X difference for vertical swipe 
     minY: 50, // min Y swipe for vertial swipe 
     maxY: 60 // max Y difference for horizontal swipe 
    }, 
     direction = null, 
     element = document.getElementById(id); 

    element.addEventListener('touchstart', function (event) { 
     var touch = event.touches[0]; 
     detect.startX = touch.screenX; 
     detect.startY = touch.screenY; 
    }); 

    element.addEventListener('touchmove', function (event) { 
     event.preventDefault(); 
     var touch = event.touches[0]; 
     detect.endX = touch.screenX; 
     detect.endY = touch.screenY; 
    }); 

    element.addEventListener('touchend', function (event) { 
     if (
      // Horizontal move. 
      (Math.abs(detect.endX - detect.startX) > detect.minX) 
       && (Math.abs(detect.endY - detect.startY) < detect.maxY) 
     ) { 
      direction = (detect.endX > detect.startX) ? 'right' : 'left'; 
     } else if (
      // Vertical move. 
      (Math.abs(detect.endY - detect.startY) > detect.minY) 
       && (Math.abs(detect.endX - detect.startX) < detect.maxX) 
     ) { 
      direction = (detect.endY > detect.startY) ? 'down' : 'up'; 
     } 

     if ((direction !== '') && (typeof f === 'function')) { 
      f(element, direction); 
     } 
    }); 
} 

verwenden Sie es wie:

detectSwipe('an_element_id', myfunction); 

Oder

detectSwipe('another_element_id', my_other_function); 

Wenn ein Swipe-Funktion erkannt wird myfunction mit Parameterelement-ID genannt und 'left' , 'right', 'up' oder 'down'.