首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >ionic框架中的swipe指令?

ionic框架中的swipe指令?
EN

Stack Overflow用户
提问于 2014-05-01 02:43:40
回答 3查看 14.7K关注 0票数 4

ionic是否有针对滑动或其他事件的指令?

我找到了这个服务:$ionicGesture。我应该用它来制定我自己的指令吗?

或者我应该使用其他的东西,比如ngTouch?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-05-11 06:20:25

没有任何开箱即用的swipe指令,但由于事件已公开,因此将一些东西组合在一起非常简单。

代码语言:javascript
复制
.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

票数 5
EN

Stack Overflow用户

发布于 2014-11-17 22:13:37

当这个问题被激活时,swipe指令似乎还不存在,但现在它们是可用的:http://ionicframework.com/docs/api/directive/onSwipe/

代码语言:javascript
复制
<button on-swipe="onSwipe()" class="button">Test</button>

还可以使用:on-swipe-lefton-swipe-righton-swipe-upon-swipe-down

票数 10
EN

Stack Overflow用户

发布于 2014-05-05 22:58:27

有一个很棒的教程,解释了如何使用Ionicframework和AngularJS http://ionicframework.com/blog/ionic-swipeable-cards/来做到这一点

基本上,您将使用Ionicframework对象/函数创建一个View,并创建一个调用它的指令。请参阅教程中的详细信息。

代码语言:javascript
复制
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);
},
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23395735

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档