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

【问题标题】：How to implement Swipe Gesture in IonicFramework?如何在 IonicFramework 中实现滑动手势？
【发布时间】：2014-11-16 15:13:57
【问题描述】：

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

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

谁能帮助提供示例 HTML 和 JS 来监听手势事件？

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

【问题讨论】：

看起来像 stackoverflow.com/questions/23395735/… 的副本

标签： javascript angularjs cordova hammer.js ionic-framework

【解决方案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
};

【讨论】：

什么是$scope？它是对<img> 标签的引用吗？
@mr5 你可以在角度文档中看到 $scope，它基本上建立了视图和控制器之间的通信。查看 hello world 示例：docs.angularjs.org/guide/scope
$scope 是有问题的触发函数的对象及其有权访问的所有属性。

【解决方案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>

【讨论】：