Question

我想附加向左滑动＆amp;使用IonicFramework在图像上向右滑动。从文档中，我只得到了这些，但还没有示例：

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

任何人都可以提供示例HTML＆amp; JS听手势事件？

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

Answer 1

Ionic有一套指令，可用于管理各种手势和事件。这会将侦听器附加到元素，并在检测到特定事件时触发事件。有举行，点击，滑动，拖动等事件。拖动和滑动也有特定的指令，只有在向某个方向拖动/滑动元素时才会触发（例如on-swipe-left）。

Ionic docs：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中看到一些可以用离子做的样本。缺点之一是手势将在拖动期间触发多个实例。如果你用计数器捕获它，你可以检查每个手势触发的实例数量。这是我在浏览手势的触发机制中的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>

如何在IonicFramework中实现Swipe Gesture？

2 个答案: