移动端获取用户在屏幕滑动方向(javascript)混合模式封装

Posted mingmliang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端获取用户在屏幕滑动方向(javascript)混合模式封装相关的知识,希望对你有一定的参考价值。

注意:无法使用touchend来获取clientX,touchend是在用户滑动结束之后才回调

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #touchDiv,#touchDiv2{
            height: 500px;
            width: 500px;
            background-color: red;
        }
        #touchDiv2{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="touchDiv"></div>
    <div id="touchDiv2"></div>
    <script type="text/javascript">
        function TouchObj(touchEle, offset,prev,next) {
          this.touchEle = touchEle;
          this.startX;
          this.endX;
          this.prev=prev;
          this.next=next;
          this.offset = offset;
          this.init(this);
        }
         
        TouchObj.prototype.init = function(this_) {
              this.touchEle.addEventListener(‘touchstart‘,function(e){
                this_.startX=e.touches[0].clientX;
            });
            this.touchEle.addEventListener(‘touchmove‘,function(e){
                this_.endX=e.touches[0].clientX;
            });
            this.touchEle.addEventListener(‘touchend‘,function(e){
                    distance=Math.abs(this_.startX-this_.endX);
                    if(distance>this_.offset){
                        this_.startX>this_.endX?eval(this_.next):eval(this_.prev);
                    }
            });
        };
         

         window.onload=function(){
             var touchTest2 = new TouchObj(document.getElementById(‘touchDiv‘),50,"console.log(‘prev‘)","console.log(‘next‘)"),
             touchTest3 = new TouchObj(document.getElementById(‘touchDiv2‘),50,"console.log(‘prev1‘)","console.log(‘next2‘)");
         };
    </script>
</body>
</html>

 

以上是关于移动端获取用户在屏幕滑动方向(javascript)混合模式封装的主要内容,如果未能解决你的问题,请参考以下文章

移动端 uni-app 滑动事件 精确判断手指滑动方向

移动端滑动方向判断

浅谈移动端之touch事件--手指的滑动事件

移动端 uni-app 滑动事件 精确判断手指滑动方向

浅谈移动端之touch事件--手指的滑动事件

移动应用滑动屏幕方向判断解决方案,JS判断手势方向