Как реализовать жест смахивания в IonicFramework?

Я хочу прикрепить свайп влево и вправо к изображению с помощью IonicFramework. Из документации я получил только это, но пока нет примера:

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

Может ли кто-нибудь помочь предоставить образец HTML и JS для прослушивания события жеста?

PS: Раньше мне удавалось реализовать это с помощью директив angularjs SwipeLeft и SwipeRight: https://docs.angularjs.org/api/ngTouch/service/$swipe . Но теперь я хочу использовать функции, предоставляемые ionicframework.


cordova ionic-framework javascript angularjs hammer.js
person Pahlevi Fikri Auliya    schedule 24.05.2014    source источник
comment
Похоже на дубликат stackoverflow.com/questions/23395735/   -  person VladFr    schedule 20.08.2014

Ответы (2)


arrow_upward
10
arrow_downward

Ionic имеет набор директив, которые вы можете использовать для управления различными жестами и событиями. Это прикрепит прослушиватель к элементу и вызовет событие при обнаружении конкретного события. Есть события для удерживания, касания, смахивания, перетаскивания и т. д. Перетаскивание также имеет специальные директивы, которые срабатывают только тогда, когда элемент перетаскивается/прокручивается в определенном направлении (например, on-swipe-left).

Документы Ionic: http://ionicframework.com/docs/api/directive/onSwipe/

Разметка

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

Контроллер

$scope.swipeLeft = function () {
  // Do whatever here to manage swipe left
};
person Jeremy Wilken    schedule 01.10.2014
comment
Что такое $scope? Это ссылка на тег <img>? - person mr5; 05.02.2015
comment
@ mr5 вы можете увидеть $scope в документах angular, он в основном устанавливает связь между представлением и контроллерами. Ознакомьтесь с примером приветствия, мир: docs.angularjs.org/guide/scope. - person SupimpaAllTheWay; 17.03.2015
comment
$scope — это рассматриваемый объект, запускающий функцию и все свойства, к которым у него есть доступ. - person David O'Regan; 31.01.2016

arrow_upward
3
arrow_downward

Вы можете увидеть некоторые примеры, которые вы можете сделать с помощью ionic, из этого сайт. Одним из недостатков является то, что жест будет запускаться несколько раз во время перетаскивания. Если вы поймаете это с помощью счетчика, вы можете проверить, сколько экземпляров запускается за жест. Это мой метод взлома в механизме запуска жеста перетаскивания, вам может потребоваться изменить целое число dragCount, чтобы увидеть, какой из них подходит для вашего экземпляра.

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);
});

добавьте эту строку в свой html-шаблон

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