问题描述
我在AngularJS中有一个应用程序,它有箭头键导航来切换视图。
I have an application made in AngularJS which has arrow key navigation to switch views.
我想使用滑动触摸设备来实现此导航。我尝试了库,但刷卡效果不佳。
我被建议不要使用。
I want to implement this navigation using swipe for touch devices. I tried jGestures library but it doesn't go well with swipe.I have been recommended NOT to use jquery mobile.
有没有实现滑动的任何其他方式?
Is there any other way to implement swipe?
编辑:
它不会检测到干净的滑动。我在多个设备上测试了它,包括iPad,需要多次滑动才能执行操作(在我的情况下路由)。
It does not detect swipe cleanly. I tested it on multiple devices, including iPad and it takes multiple swipes to do an action(routing in my case).
推荐答案
我根据自己的需要制作了这个功能。
I made this function for my needs.
随意使用它。在移动设备上运行良好。
Feel free to use it. Works great on mobile devices.
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");
}
要使用该功能,只需使用它就像
To use the function just use it like
detectswipe('an_element_id',myfunction);
detectswipe('an_other_element_id',my_other_function);
如果检测到滑动,则使用参数element-id和l调用函数myfunction r,u,d(左,右,上,下)。
If a swipe is detected the function "myfunction" is called with parameter element-id and "l,r,u,d" (left,right,up,down).
示例:
这篇关于如何为移动设备实现滑动手势?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!