如何在移动设备上实现滑动手势呢？

5 浏览
0 Comments

如何在移动设备上实现滑动手势呢？

我有一个使用AngularJS制作的应用程序，具有用箭头键导航以切换视图的功能。

我想使用触摸设备的滑动来实现这种导航。我尝试了jGestures库，但是它与滑动不太兼容。

有人建议我不要使用jquery mobile。

还有其他实现滑动的方法吗？

编辑：

它不能清晰地检测到滑动。我在多个设备上进行了测试，包括iPad，需要多次滑动才能完成一个操作（在我的情况下是路由）。

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

你试过使用Hammerjs吗？它可以通过触摸的速度来支持滑动手势。
http://eightmedia.github.com/hammer.js/

0
0 Comments

我为了满足自己的需要而创建了这个函数。

自由使用。在移动设备上运行效果良好。

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");
}

使用该函数只需像下面这样使用：

detectswipe('an_element_id',myfunction);
detectswipe('an_other_element_id',my_other_function);

如果检测到滑动，将调用函数“myfunction”，并将元素ID和“l，r，u，d”（左，右，上，下）作为参数。

示例：http://jsfiddle.net/rvuayqeo/1/

我（UlysseBN）基于这个脚本创建了一个新版本，使用更现代的JavaScript，看起来在某些情况下表现更好。如果您认为它应该是这个答案的编辑，请告诉我，如果您是原始作者并最终编辑，我会删除我的答案。

0