Wie wird Swipe Gesture in IonicFramework implementiert?

Question

Ich möchte Swipe linken & Swipe rechts auf ein Bild mit IonicFramework. Aus der Dokumentation, ich habe nur diese, aber kein Beispiel noch:

http://ionicframework.com/docs/api/service/ $ ionicGesture/ http://ionicframework.com/docs/api/utility/ionic.EventController/#onGesture

Kann jemand HTML-Beispiel & JS helfen bieten zu Gestenereignis zu hören?

P.S .: Zuvor konnte ich es mit der angularjs SwipeLeft und SwipeRight-Direktive implementieren: https://docs.angularjs.org/api/ngTouch/service/ $ swipe. Aber jetzt möchte ich die Funktionen von ionicframework nutzen.

Answer 1

Ionic verfügt über eine Reihe von Anweisungen, mit denen Sie verschiedene Gesten und Ereignisse verwalten können. Dadurch wird ein Listener an ein Element angehängt und das Ereignis ausgelöst, wenn das bestimmte Ereignis erkannt wird. Es gibt Ereignisse zum Halten, Tippen, Wischen, Ziehen und mehr. Ziehe und wische auch bestimmte Anweisungen, die nur ausgelöst werden, wenn das Element in eine Richtung gezogen/gezogen wird (z. B. on-swipe-left).

Ionic docs: http://ionicframework.com/docs/api/directive/onSwipe/

Markup

<img src="image.jpg" on-swipe-left="swipeLeft()" /> 

-Controller

$scope.swipeLeft = function() { 
    // Do whatever here to manage swipe left 
}; 

Answer 2

Sie einige der Probe sehen können, die Sie mit ionischen aus diesem site tun können. Einer der Nachteile ist, dass die Geste beim Ziehen mehrere Instanzen auslöst. Wenn Sie es mit einem Zähler abfangen, können Sie überprüfen, wie oft die Instanzen pro Geste ausgelöst werden. Dies ist meine Hack-Methode innerhalb des Auslösemechanismus der Drag-Geste, die Sie brauchen, um den dragCount-Integer zu ändern, um zu sehen, welcher für Ihre Instanz Suite ist.

var dragCount = 0; 
var element = angular.element(document.querySelector('#eventPlaceholder')); 
     var events = [{ 
     event: 'dragup', 
     text: 'You dragged me UP!' 
     },{ 
     event: 'dragdown', 
     text: 'You dragged me Down!' 
     },{ 
     event: 'dragleft', 
     text: 'You dragged me Left!' 
     },{ 
     event: 'dragright', 
     text: 'You dragged me Right!' 
     }]; 
angular.forEach(events, function(obj){ 
var dragGesture = $ionicGesture.on(obj.event, function (event) { 
    $scope.$apply(function() { 
     $scope.lastEventCalled = obj.text; 
     //console.log(obj.event) 
     if (obj.event == 'dragleft'){       
      if (dragCount == 5){ 
       // do what you want here 
      } 
      dragCount++; 
      if (dragCount > 10){ 
        dragCount = 0; 
       } 
      //console.log(dragCount) 
     } 
     if (obj.event == 'dragright'){       
      if (dragCount == 5){ 
       // do what you want here 
      } 
      dragCount++; 
      if (dragCount > 10){ 
        dragCount = 0; 
       } 
      //console.log(dragCount) 
     } 
    }); 

    }, element); 
}); 

fügen Sie diese Zeile in Ihre HTML-Vorlage

<ion-content id="eventPlaceholder" has-bouncing="false">{{lastEventCalled}}</ion-content>