zoukankan      html  css  js  c++  java
  • 对于移动端浏览器touch事件的研究总结(4)判断手指滑动方向

    最近有一些微信的项目,虽然页面很简单,但配合手势后的效果却是很不错的。最基本的效果就是手指向上滑,页面配合css3出现一个展开效果,手指向下滑将展开的内容按原路径收起。其实就是一个简单的判断手指滑动方向让页面滚动一屏的高度。

    先来看代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    $("body").on("touchstart"function(e) {
        e.preventDefault();
        startX = e.originalEvent.changedTouches[0].pageX,
        startY = e.originalEvent.changedTouches[0].pageY;
    });
    $("body").on("touchmove"function(e) {
        e.preventDefault();
        moveEndX = e.originalEvent.changedTouches[0].pageX,
        moveEndY = e.originalEvent.changedTouches[0].pageY,
        X = moveEndX - startX,
        Y = moveEndY - startY;
     
        if ( X > 0 ) {
            alert("left 2 right");
        }
        else if  ( X < 0 ) {
            alert("right 2 left");
        }
        else if  ( Y > 0) {
            alert("top 2 bottom");
        }
        else if  ( Y < 0 ) {
            alert("bottom 2 top");
        }
        else{
            alert("just touch");
        }
    });


    判断很简单,touchmove的最后坐标减去touchstart的起始坐标,X的结果如果正数,则说明手指是从左往右划动;X的结果如果负数,则说明手指是从右往左划动;Y的结果如果正数,则说明手指是从上往下划动;Y的结果如果负数,则说明手指是从下往上划动。

    这再逻辑上没有任何问题。但在实际操作中,手指的上下滑动其实是很难直上直下的,只要稍微有点斜,就会被X轴的判断先行接管。

    那么接下来我们就需要梁逸峰同学附体,加上特别的判断技巧:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    $("body").on("touchstart"function(e) {
        e.preventDefault();
        startX = e.originalEvent.changedTouches[0].pageX,
        startY = e.originalEvent.changedTouches[0].pageY;
    });
    $("body").on("touchmove"function(e) {
        e.preventDefault();
        moveEndX = e.originalEvent.changedTouches[0].pageX,
        moveEndY = e.originalEvent.changedTouches[0].pageY,
        X = moveEndX - startX,
        Y = moveEndY - startY;
         
        if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
            alert("left 2 right");
        }
        else if  ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
            alert("right 2 left");
        }
        else if  ( Math.abs(Y) > Math.abs(X) && Y > 0) {
            alert("top 2 bottom");
        }
        else if  ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
            alert("bottom 2 top");
        }
        else{
            alert("just touch");
        }
    });

    增加的判断也很简单,无非就是判断哪个的差值比较大。这样一来基本上就不会出错了。测试例子可以访问这里http://aresli.com/demo/touch-event/touch5.html

    转载:https://blog.csdn.net/kaikai4/article/details/46840317

  • 相关阅读:
    Jzoj4822 完美标号
    Jzoj4822 完美标号
    Jzoj4792 整除
    Jzoj4792 整除
    Educational Codeforces Round 79 A. New Year Garland
    Good Bye 2019 C. Make Good
    ?Good Bye 2019 B. Interesting Subarray
    Good Bye 2019 A. Card Game
    力扣算法题—088扰乱字符串【二叉树】
    力扣算法题—086分隔链表
  • 原文地址:https://www.cnblogs.com/BluceLee/p/9319819.html
Copyright © 2011-2022 走看看