离子框架中的滑动指令?

时间:2014-04-30 18:43:40

标签: touch ionic-framework

离子是否有滑动或其他事件的指令?
我找到了这项服务:$ionicGesture。我应该用这个制作自己的指令吗?

或者我应该使用像ngTouch这样的其他东西吗?

3 个答案:

答案 0 :(得分:10)

似乎此问题处于有效状态时滑动指令不存在,但它们现在可用:http://ionicframework.com/docs/api/directive/onSwipe/

<button on-swipe="onSwipe()" class="button">Test</button>

同样可用:on-swipe-lefton-swipe-righton-swipe-upon-swipe-down

答案 1 :(得分:5)

没有开箱即用的任何滑动指令,但由于事件已暴露,将某些东西放在一起非常简单。

.directive('detectGestures', function($ionicGesture) {
  return {
    restrict :  'A',

    link : function(scope, elem, attrs) {
      var gestureType = attrs.gestureType;

      switch(gestureType) {
        case 'swipe':
          $ionicGesture.on('swipe', scope.reportEvent, elem);
          break;
        case 'swiperight':
          $ionicGesture.on('swiperight', scope.reportEvent, elem);
          break;
        case 'swipeleft':
          $ionicGesture.on('swipeleft', scope.reportEvent, elem);
          break;
        case 'doubletap':
          $ionicGesture.on('doubletap', scope.reportEvent, elem);
          break;
        case 'tap':
          $ionicGesture.on('tap', scope.reportEvent, elem);
          break;
      }

    }
  }
})

Check out this demo

答案 2 :(得分:1)

有一个很好的教程解释如何使用Ionicframework和AngularJS http://ionicframework.com/blog/ionic-swipeable-cards/

基本上你要使用Ionicframework objetcs / functions创建一个View 喜欢下面的代码片段,并创建一个将调用它的指令。请参阅教程中的详细信息。

var SwipeableCardView = ionic.views.View.inherit({   
    initialize: function(opts) {
    // Store the card element
    this.el = opts.el;
    this.bindEvents();
},
bindEvents: function() {

    var self = this;

    ionic.onGesture('drag', function(e) {
       // Process drag
    }, this.el);

    ionic.onGesture('dragend', function(e) {
       // Process end of drag
    }, this.el);
},