js左右滑动手势

在一定端最常用的事件之一会就是滑动了，但是js却未给我们提供相应的方式方法，所以只能自己封装了

实现心路历程

首先要判断滑动的两个大方向，垂直和水平，通过touchmove和touchstart的
坐标可以相减得出运动的垂直边与水平边，再比较两条边的大小判断得出滑动的大方向
得出大方向后可以通过相减后正负值的结果判断左右上下滑动，调用写好相关的函数
调用touchmove的时候，可以求得元素相应的位置，并赋值样式到css，可以拖拽运动

遇到的问题

在调用拖拽函数时无法获取touch三大事件的事件对象，可以在函数内储存到一个对象中并追加到事件对象中，然后再调用时当做实参传入用户可能未输入相应的参数，可以设置默认的参数，在真正输入时覆盖

好了上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        function swipe(el, options) {
            //设置开关，监听move事件
            var isMove = false;
            // 设置手指触摸开始的坐标
            var startX = 0;
            var startY = 0;
            // 设置手指移动的坐标
            var moveX = 0;
            var moveY = 0;
            //设置指针距离元素的边框的距离
            var disX = 0;
            var disY = 0;
            // 如果用户未传入参数2，自己定义一个
            var data = {
                    swipeLeft: function() {},
                    swipeRight: function() {},
                    swipeDown: function() {},
                    swipeUp: function() {},
                    drag: function() {}
                }
                // 判断是否传入参数2，有的话覆盖默认值
            Object.assign(data, options);
            // 给元素绑定三个事件
            el.addEventListener('touchstart', function(e) {
                //获取手指开始的坐标
                startX = e.touches[0].pageX;
                startY = e.touches[0].pageY;
                //计算指针距离元素边框的位置
                disX = startX - el.offsetLeft;
                disY = startY - el.offsetTop;
            });
            el.addEventListener('touchmove', function(e) {
                //如果触发了move事件，打开开关
                isMove = true;
                // 获取移动时的坐标
                moveX = e.touches[0].pageX;
                moveY = e.touches[0].pageY;
                e.mation = {
                    startX: startX,
                    startY: startY,
                    moveX: moveX,
                    moveY: moveY,
                    disX: disX,
                    disY: disY
                }
                data.drag.call(el, e);
            });
            el.addEventListener('touchend', function(e) {
                // 判断是否触发了move事件
                if (isMove) {
                    // 计算水平边长
                    var absX = Math.abs(moveX - startX);
                    // 计算垂直边长
                    var absY = Math.abs(moveY - startY);
                    // 判断垂直还是水平滑动
                    if (absX > absY) {
                        // console.log('水平滑动');
                        //再判断是左滑右滑
                        if (moveX - startX > 0) {
                            data.swipeRight.call(el, e);
                        } else {
                            data.swipeLeft.call(el, e);
                        }
                    } else {
                        // console.log('垂直滑动');
                        //判断是上滑还是下滑
                        if (moveY - start > 0) {
                            data.swipeDown.call(el, e);
                        } else {
                            data.swipeUp.call(el, e);
                        }
                    }
                }
                isMove = false;
            });
        }
        var box = document.querySelector('.box');
        swipe(box, {
            swipeLeft: function() {},
            swipeRight: function() {},
            swipeDown: function() {},
            swipeUp: function() {},
            drag: function(e) {
                //给元素设置样式，实现运动
                this.style.left = e.touches[0].pageX - e.mation.disX + 'px';
                this.style.top = e.touches[0].pageY - e.mation.disY + 'px';
            }
        })
    </script>
</body>

</html>

来源：CSDN

作者：一个div

链接：https://blog.csdn.net/weixin_43383814/article/details/103873359

标签