Question

我在AngularJS中有一个应用程序，它有箭头键导航来切换视图。

我想使用滑动触控设备来实现此导航。我尝试了jGestures库，但滑动效果不佳。我被建议不要使用jquery mobile。

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

编辑：它不会检测到干净的滑动。我在多个设备上测试了它，包括iPad，需要多次滑动才能执行操作（在我的情况下路由）。

Answer 1

我根据自己的需要制作了这个功能。

随意使用它。适用于移动设备。

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

如果检测到滑动功能＆＃34; myfunction＆＃34;使用参数element-id和＆＃34; l，r，u，d＆＃34; （左，右，上，下）。

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

Answer 2

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

Answer 3

还有一个名为angular-gestures的AngularJS模块，它基于hammer.js： https://github.com/wzr1337/angular-gestures

Answer 4

我发现最简单的解决方案不需要插件：

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

Answer 5

我知道无耻的插件，但您可能想要考虑我写的jQuery插件：

https://github.com/benmajor/jQuery-Mobile-Events

它不需要jQuery Mobile，只需要jQuery。

Answer 6

锤击时间！

我使用过锤子JS，它可以用手势。从这里阅读详细信息：https://hammerjs.github.io/

好的是它比jQuery mobile更轻，更快。您也可以在他们的网站上测试它。

Answer 7

_{注意：：受EscapeNetscape's answer的启发，我在注释中使用了现代javascript对其脚本进行了编辑。由于用户的兴趣和jsfiddle.net的大量停机4小时，我对此做出了回答。我选择不编辑原始答案，因为它会改变一切...}

这是一个detectSwipe函数，运行良好（在我的一个网站上使用）。我建议您在使用前先阅读它。随时查看/编辑答案。

// usage example
detectSwipe('swipeme', (el, dir) => alert(`you swiped on element with id ${el.id} to ${dir} direction`))

// source code

// Tune deltaMin according to your needs. Near 0 it will almost
// always trigger, with a big value it can never trigger.
function detectSwipe(id, func, deltaMin = 90) {
  const swipe_det = {
    sX: 0,
    sY: 0,
    eX: 0,
    eY: 0
  }
  // Directions enumeration
  const directions = Object.freeze({
    UP: 'up',
    DOWN: 'down',
    RIGHT: 'right',
    LEFT: 'left'
  })
  let direction = null
  const el = document.getElementById(id)
  el.addEventListener('touchstart', function(e) {
    const t = e.touches[0]
    swipe_det.sX = t.screenX
    swipe_det.sY = t.screenY
  }, false)
  el.addEventListener('touchmove', function(e) {
    // Prevent default will stop user from scrolling, use with care
    // e.preventDefault();
    const t = e.touches[0]
    swipe_det.eX = t.screenX
    swipe_det.eY = t.screenY
  }, false)
  el.addEventListener('touchend', function(e) {
    const deltaX = swipe_det.eX - swipe_det.sX
    const deltaY = swipe_det.eY - swipe_det.sY
    // Min swipe distance, you could use absolute value rather
    // than square. It just felt better for personnal use
    if (deltaX ** 2 + deltaY ** 2 < deltaMin ** 2) return
    // horizontal
    if (deltaY === 0 || Math.abs(deltaX / deltaY) > 1)
      direction = deltaX > 0 ? directions.RIGHT : directions.LEFT
    else // vertical
      direction = deltaY > 0 ? directions.UP : directions.DOWN

    if (direction && typeof func === 'function') func(el, direction)

    direction = null
  }, false)
}

#swipeme {
  width: 100%;
  height: 100%;
  background-color: orange;
  color: black;
  text-align: center;
  padding-top: 20%;
  padding-bottom: 20%;
}

<div id='swipeme'>
  swipe me
</div>

Answer 8

我喜欢您的解决方案，并在我的网站上实施 - 但是，稍微改进了一些。只是想分享我的代码：

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 !== null) && (typeof f === 'function')) {
            f(element, direction);
        }
    });
}

使用它像：

detectSwipe('an_element_id', myfunction);

或者

detectSwipe('another_element_id', my_other_function);

如果检测到滑动，则会使用参数element-id和myfunction，'left'，'right'或'up'调用函数'down'。

Answer 9

我查看了几种解决方案，但所有解决方案均因滚动和选择文本失败而失败，这是最大的困惑。我没有向右滚动，而是关闭了框之类的东西。

我刚刚完成了为我做的所有事情。

https://github.com/webdevelopers-eu/jquery-dna-gestures

这是麻省理工学院，所以您可以做您想做的-是的，这确实很简单-缩小800个字节。您可以在我的（开发中）网站https://cyrex.tech上进行查看-在触摸设备上向右滑动即可关闭弹出窗口。

如何为移动设备实现滑动手势？

9 个答案: