如何在IonicFramework中实现Swipe Gesture？

I want to attach swipe left & swipe right on an image using IonicFramework. From the documentation, I only got these, but no example yet:

我想使用IonicFramework在图像上向左滑动并向右滑动。从文档中,我只得到了这些,但还没有示例:

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

Can anyone help provide sample HTML & JS to listen to gesture event?

任何人都可以帮助提供示例HTML和JS来收听手势事件吗?

P.S.: Previously, I managed to implement it using angularjs SwipeLeft and SwipeRight directive: https://docs.angularjs.org/api/ngTouch/service/$swipe . But now I wish to use the functions provided by ionicframework.

P.S。:之前,我设法使用angularjs SwipeLeft和SwipeRight指令实现它:https://docs.angularjs.org/api/ngTouch/service/$swipe。但现在我希望使用ionicframework提供的功能。

2 个解决方案

#1

Ionic has a set of directives that you can use to manage various gestures and events. This will attach a listener to an element and fire the event when the particular event is detected. There are events for holding, tapping, swiping, dragging, and more. Drag and swipe also have specific directives to only fire when the element is dragged/swiped in a direction (such as on-swipe-left).

Ionic有一组指令,可用于管理各种手势和事件。这会将侦听器附加到元素,并在检测到特定事件时触发事件。有举行,点击,滑动,拖动等事件。拖动和滑动也具有特定指令,仅在向某个方向拖动/滑动元素时触发(例如向上滑动左侧)。

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

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

#2

You can see some of sample which you can do with ionic from this site. One of the drawback is that the gesture will fire multiple instances during drag. If you catch it with a counter you can check how much the instances being fired per gesture. This is my hack method within the firing mechanism of of drag gesture you might need to change the dragCount integer to see which one is suite for your instance.

你可以在这个网站上看到一些你可以用离子做的样品。缺点之一是手势将在拖动期间触发多个实例。如果你用计数器捕获它,你可以检查每个手势触发的实例数量。这是我在拖动手势的触发机制中的hack方法,您可能需要更改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);
});

add this line in your html template

在您的html模板中添加此行

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

#1