如何在IonicFramework中實現滑動手勢？

我想附加向左滑動&使用IonicFramework在圖像上向右滑動。從文檔，我只得到了這些，但沒有如尚未：如何在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。但是現在我想使用離子框架提供的功能。

來源

2014-05-24 Pahlevi Fikri Auliya

貌似http://stackoverflow.com/questions/23395735/swipe-directive-in-ionic-framework – VladFr

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

來源

2014-10-01 15:18:51

的副本是什麼' $ scope'？它是對''標籤的引用嗎？ – mr5

@ mr5你可以在角度文檔中看到$ scope，它基本上建立了視圖和控制器之間的通信。簽出hello world示例：https：//docs.angularjs.org/guide/scope – SupimpaAllTheWay

僅供參考不適用於ios 9模擬器... –

你可以看到一些樣品，你可以從這個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>

來源

2014-11-16 07:13:57 syarul

這應該被標記爲正確答案... –

如何在IonicFramework中實現滑動手勢？

回答

相關問題