torch
torch
  • 发布:2020-11-20 18:39
  • 更新:2025-01-21 10:08
  • 阅读:10867

uni-app 如何判断/获取 左滑右滑上滑下滑 等手势事件。

分类:uni-app

官方我没有看到监听的方法,大家可以参考下面的方法,可以自己修改50的大小。

复制代码<template>  
    <view @touchstart="touchStart" @touchend="touchEnd" style="height:2000px;">  
        测试  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                touchStartX: 0,  // 触屏起始点x  
                touchStartY: 0,  // 触屏起始点y  
            };  
        },  
        methods: {  
            /**  
            * 触摸开始  
            **/  
            touchStart(e) {  
                console.log("触摸开始")  
                this.touchStartX = e.touches[0].clientX;  
                this.touchStartY = e.touches[0].clientY;  
            },  

            /**  
            * 触摸结束  
            **/  
            touchEnd(e) {  
                console.log("触摸结束")  
                let deltaX = e.changedTouches[0].clientX - this.touchStartX;  
                let deltaY = e.changedTouches[0].clientY - this.touchStartY;  
                if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {  
                    if (deltaX >= 0) {  
                        console.log("左滑")  
                    } else {  
                        console.log("右滑")  
                    }  
                } else if(Math.abs(deltaY) > 50&& Math.abs(deltaX) < Math.abs(deltaY)) {  
                    if (deltaY < 0) {  
                        console.log("上滑")  
                    } else {  
                        console.log("下滑")  
                    }  
                } else {  
                    console.log("可能是误触!")  
                }  
            },            
        }  
    };  
</script>
16 关注 分享
j***@163.com 超难微猫 [已删除] 乃斯乃斯 wini leaf666 获月三十 1***@163.com C***@outlook.com hws007 q***@foxmail.com 6***@qq.com TestWZ 不知道呀 1***@qq.com ax003d

要回复文章请先登录注册

MonkeyLiang

MonkeyLiang

这个只能监听app页面的手势,系统的左滑监听不了
2025-01-21 10:08
d***@163.com

d***@163.com

怎么看不到评论呢
2022-12-12 23:14
x***@gmail.com

x***@gmail.com

写的啥玩意
2022-06-01 10:45
x***@gmail.com

x***@gmail.com

(deltaX >= 0) ???? 等于 0 的话左滑?
2022-06-01 10:43
x***@gmail.com

x***@gmail.com

着急写代码。
2022-06-01 10:43
2***@qq.com

2***@qq.com

回复 小韦飞狼 :
client 和 page 好像是浏览器 ,screen是app
2022-01-31 01:44
MannaLee

MannaLee

怎么用 一直不明白 求大神指教
2021-12-08 10:26
小韦飞狼

小韦飞狼

clientX 换成screenX才能用,是不是有什么机型兼容问题?
2021-03-28 15:47
2***@qq.com

2***@qq.com

为英雄点个赞
2021-03-10 00:31
超难微猫

超难微猫

感谢
2021-03-08 21:04