如何在Ionic框架中实现滑动手势？

Question

我希望使用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提供的函数。

- Pahlevi Fikri Auliya

---

看起来是一个重复的问题，与https://dev59.com/Gn_aa4cB1Zd3GeqP0kCp相同。 - VladFr

Answer 1

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

- Jeremy Wilken

---

$scope 是什么？它是指 <img> 标签吗？ - mr5

@mr5在Angular文档中可以看到$scope，它基本上建立了视图和控制器之间的通信。请查看"Hello World"示例：https://docs.angularjs.org/guide/scope - SupimpaAllTheWay

$scope是触发函数的对象，以及它可以访问的所有属性。 - David O'Regan

Answer 2

您可以在这个网站上看到一些您可以使用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>

- syarul