js左右滑动手势

最新推荐文章于 2023-11-11 11:16:29 发布

一个div

最新推荐文章于 2023-11-11 11:16:29 发布

阅读量2.6k

点赞数

文章标签： js javascript

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

版权

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>

一个div

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js左右滑动手势

js左右滑动手势在一定端最常用的事件之一会就是滑动了，但是js却未给我们提供相应的方式方法，所以只能自己封装了实现心路历程首先要判断滑动的两个大方向，垂直和水平，通过touchmove和touchstart的坐标可以相减得出运动的垂直边与水平边，再比较两条边的大小判断得出滑动的大方向得出大方向后可以通过相减后正负值的结果判断左右上下滑动，调用写好相关的函数调用touchmove...
复制链接

扫一扫