用hammer.js的流星/科尔多瓦手势

Question

我需要在我的Meteor应用程序中添加手势.我不明白怎么做.

现在我将我的代码放在Template.XX.rendered中,而不是在事件范围内调用手势:

Session.setDefault('deletable', false);

Template.xx.rendered = function(){
  $('body').hammer();
};

Template.xx.events({
'swipeleft #hammerDiv': function(e, t) {
    Session.set('deletable', true);
  },
  'swiperight #hammerDiv': function(e, t) {
    Session.set('deletable', false);
  }
});

Template.territories.helpers({
  deleteButton : function(){
    return Session.get('deletable');
  }
});

这个简单的代码可以在滑动项目中显示删除按钮.所有似乎都与铬和鼠标滑动,但当我在我的Android设备(流星运行android设备)模拟应用程序时,滑动手势不起作用.如果我使用Chrome浏览器测试我的设备,所有工作都已完成.

有兼容性问题吗？我的代码错了吗？有什么建议？

非常感谢!

Answer 1

我找到了适用于我的最终解决方案:

1. 我将hammer()属性设置为快速滑动和触摸;
2. 我在每个滑动事件中添加了preventDefault();
3. Set现在设置为将this._id传递给帮助程序以检查滑动项是否具有相同的对象ID,然后,如果为true,则显示删除按钮.

代码:

Session.setDefault('deletable', null);

Template.xx.rendered = function(){
  $('body').hammer({
    drag_min_distance:1,
    swipe_velocity:0.1
  });
};

Template.xx.events({
'swipeleft #hammerDiv': function(e, t) {
    e.preventDefault();
    Session.set('deletable', null);
  },
'swiperight #hammerDiv': function(e, t) {
    e.preventDefault();
    Session.set('deletable', this._id);
  }
});

Template.xx.helpers({
  deleteButton : function(){
    var thisItem = Session.get('deletable');
    if (thisItem == this._id){
      return true
    }else{
      return false;
    }
  }
});

或者,不是在事件中应用preventDefault(),而是可以更改hammer()目标并添加如下所示的新属性:

 $('#hammerDiv').hammer({
    drag_min_distance:1,
    swipe_velocity:0.1
    prevent_default:true
  });