如何在IonicFramework中实现滑动手势？

Question

我想附加向左滑动和向右滑动对一个图像使用IonicFramework。从文档中，我只得到了这些，但还没有示例：

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

有人可以帮助提供示例HTML & JS来监听手势事件吗？

附言:之前，我设法使用angularjs SwipeLeft和SwipeRight指令实现了它：https://docs.angularjs.org/api/ngTouch/service/$swipe。但现在我希望使用ionicframework提供的函数。

Answer 1

Ionic有一组指令，您可以使用它们来管理各种手势和事件。这会将一个侦听器附加到一个元素，并在检测到特定事件时触发该事件。有按住、点击、滑动、拖动等事件。拖动和滑动还具有特定的指令，仅当在某个方向(如on-swipe-left)上拖动/滑动元素时才触发。

离子文档：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
};

Answer 2

你可以从这个site中看到一些你可以用ionic做的例子。其中一个缺点是，手势将在拖动过程中触发多个实例。如果你用计数器捕捉到它，你可以检查每个手势触发了多少实例。这是我在拖动手势的触发机制内的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);
}); 

将此行添加到html模板中。

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