我有一个AngularJS应用程序,它有箭头键导航来切换视图。如何为移动设备实施轻扫手势?
我想使用滑动触摸设备来实现此导航。我试过jGestures库,但是刷卡不好。 我被建议不要使用jquery mobile。
有没有其他的方式来实现刷卡?编辑: 它不会检测到滑动干净。我在包括iPad在内的多种设备上进行了测试,并且需要多次滑动才能执行操作(在我的情况下为路由)。
我有一个AngularJS应用程序,它有箭头键导航来切换视图。如何为移动设备实施轻扫手势?
我想使用滑动触摸设备来实现此导航。我试过jGestures库,但是刷卡不好。 我被建议不要使用jquery mobile。
有没有其他的方式来实现刷卡?编辑: 它不会检测到滑动干净。我在包括iPad在内的多种设备上进行了测试,并且需要多次滑动才能执行操作(在我的情况下为路由)。
无耻插头我知道,但你可能要考虑一个jQuery插件,我写道:
https://github.com/benmajor/jQuery-Mobile-Events
它不需要jQuery Mobile的,只有jQuery的。
您是否尝试过Hammerjs?它通过使用触摸的速度来支持滑动手势。 http://eightmedia.github.com/hammer.js/
我用http://quojs.tapquo.com/。它运作良好。听说有关HammerJS的许多肯定,会在其他一些项目中尝试。感谢您的答复。 – fotuzlab 2013-03-07 10:42:24
我写了一个简单的服务包装Hammerjs。与Angular非常相称。 – 2015-08-24 07:38:12
感谢您的推荐! hammerjs与当前版本的JQuery一起工作,无需迁移jquery.mobile。没有警告,没有错误。 NICE! – 2017-09-28 18:48:38
还有一个名为角手势的AngularJS模块是基于hammer.js: https://github.com/wzr1337/angular-gestures
我为我的需求使这个功能。
随意使用它。在移动设备上非常出色。
function detectswipe(el,func) {
swipe_det = new Object();
swipe_det.sX = 0; swipe_det.sY = 0; swipe_det.eX = 0; swipe_det.eY = 0;
var min_x = 30; //min x swipe for horizontal swipe
var max_x = 30; //max x difference for vertical swipe
var min_y = 50; //min y swipe for vertical swipe
var max_y = 60; //max y difference for horizontal swipe
var direc = "";
ele = document.getElementById(el);
ele.addEventListener('touchstart',function(e){
var t = e.touches[0];
swipe_det.sX = t.screenX;
swipe_det.sY = t.screenY;
},false);
ele.addEventListener('touchmove',function(e){
e.preventDefault();
var t = e.touches[0];
swipe_det.eX = t.screenX;
swipe_det.eY = t.screenY;
},false);
ele.addEventListener('touchend',function(e){
//horizontal detection
if ((((swipe_det.eX - min_x > swipe_det.sX) || (swipe_det.eX + min_x < swipe_det.sX)) && ((swipe_det.eY < swipe_det.sY + max_y) && (swipe_det.sY > swipe_det.eY - max_y) && (swipe_det.eX > 0)))) {
if(swipe_det.eX > swipe_det.sX) direc = "r";
else direc = "l";
}
//vertical detection
else if ((((swipe_det.eY - min_y > swipe_det.sY) || (swipe_det.eY + min_y < swipe_det.sY)) && ((swipe_det.eX < swipe_det.sX + max_x) && (swipe_det.sX > swipe_det.eX - max_x) && (swipe_det.eY > 0)))) {
if(swipe_det.eY > swipe_det.sY) direc = "d";
else direc = "u";
}
if (direc != "") {
if(typeof func == 'function') func(el,direc);
}
direc = "";
swipe_det.sX = 0; swipe_det.sY = 0; swipe_det.eX = 0; swipe_det.eY = 0;
},false);
}
function myfunction(el,d) {
alert("you swiped on element with id '"+el+"' to "+d+" direction");
}
要使用如果滑动检测函数 “myfunction的” 被调用参数元素-id和 “L,R,U,d”(功能只是用它像
detectswipe('an_element_id',myfunction);
detectswipe('an_other_element_id',my_other_function);
左,右,上,下)。
谢谢。我建议动态设置'min_x':'min_x = Math.abs(swipe_det.eY - swipe_det.sY)'。模拟其他方向。因为当你向上滑动400px并且只有40px正确时,你可能打算向上滑动。但是,您的代码会识别右侧滑动。 – Sadik 2017-02-03 14:07:45
@EscapeNetscape我喜欢你的解决方案刷卡检测。但它错误地将单击和双击标识为滑动。我将如何去解决这个问题? – theJollySin 2017-04-13 15:42:36
,不需要插件,我发现最简单的办法是givanse's answer一个类似的问题:
document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);
var xDown = null;
var yDown = null;
function handleTouchStart(evt) {
xDown = evt.touches[0].clientX;
yDown = evt.touches[0].clientY;
};
function handleTouchMove(evt) {
if (! xDown || ! yDown) {
return;
}
var xUp = evt.touches[0].clientX;
var yUp = evt.touches[0].clientY;
var xDiff = xDown - xUp;
var yDiff = yDown - yUp;
if (Math.abs(xDiff) > Math.abs(yDiff)) {/*most significant*/
if (xDiff > 0) {
/* left swipe */
} else {
/* right swipe */
}
} else {
if (yDiff > 0) {
/* up swipe */
} else {
/* down swipe */
}
}
/* reset values */
xDown = null;
yDown = null;
};
哈默时刻!
我已经使用了Hammer JS,它与手势一起工作。从这里阅读详细信息:https://hammerjs.github.io/
好的事情,它是更轻量和快速,然后jQuery手机。你也可以在他们的网站上测试它。
我喜欢你的解决方案,并在我的网站上实现它 - 但是,有一些小的改进。只是想分享我的代码:
function detectSwipe(id, f) {
var detect = {
startX: 0,
startY: 0,
endX: 0,
endY: 0,
minX: 30, // min X swipe for horizontal swipe
maxX: 30, // max X difference for vertical swipe
minY: 50, // min Y swipe for vertial swipe
maxY: 60 // max Y difference for horizontal swipe
},
direction = null,
element = document.getElementById(id);
element.addEventListener('touchstart', function (event) {
var touch = event.touches[0];
detect.startX = touch.screenX;
detect.startY = touch.screenY;
});
element.addEventListener('touchmove', function (event) {
event.preventDefault();
var touch = event.touches[0];
detect.endX = touch.screenX;
detect.endY = touch.screenY;
});
element.addEventListener('touchend', function (event) {
if (
// Horizontal move.
(Math.abs(detect.endX - detect.startX) > detect.minX)
&& (Math.abs(detect.endY - detect.startY) < detect.maxY)
) {
direction = (detect.endX > detect.startX) ? 'right' : 'left';
} else if (
// Vertical move.
(Math.abs(detect.endY - detect.startY) > detect.minY)
&& (Math.abs(detect.endX - detect.startX) < detect.maxX)
) {
direction = (detect.endY > detect.startY) ? 'down' : 'up';
}
if ((direction !== '') && (typeof f === 'function')) {
f(element, direction);
}
});
}
这样使用它:
detectSwipe('an_element_id', myfunction);
或者
detectSwipe('another_element_id', my_other_function);
如果刷卡检测功能myfunction
被调用参数元素-id和'left'
,'right'
,'up'
或'down'
。
您可能想详细说明您使用jGestures时遇到的问题。我自己并没有使用它,但它看起来像我为简单的手势支持(并在其他地方看到)编写的自定义代码的强大版本。 – 2013-02-26 08:44:49
在编辑中添加了它们。 – fotuzlab 2013-03-07 10:41:29
“我被建议不要使用jQuery手机。”为什么? – givanse 2014-04-19 17:16:39