HTML5移动端通过touch事件判断手势方向及页面到达底部

最新推荐文章于 2024-10-30 15:42:14 发布

52.0Hz

最新推荐文章于 2024-10-30 15:42:14 发布

阅读量5.4k

点赞数

分类专栏： js HTML5 文章标签： js javascript html5 移动

本文链接：https://blog.youkuaiyun.com/Loving_M/article/details/77991163

版权

js 同时被 2 个专栏收录

8 篇文章

订阅专栏

HTML5

4 篇文章

订阅专栏

本文介绍了一个用于触摸屏设备上的滑动检测方法，包括如何记录开始和结束位置、判断滑动方向以及监测滚动区域的状态。通过具体实现代码，展示了如何在用户交互过程中捕捉滑动事件并据此调整应用行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

startClientY:0,//屏幕开始滑动位置
endClientY:0,//屏幕结束滑动位置
movedirection:'CENTER',//滑动方向
lastscrolltop:0,//上一次的滚动距离





handleStart (e){
        this.lastscrolltop=0;//重置上次位置
 this.startClientY
= e.touches[0].clientY; console.log("开始位置:",this.startClientY)},



handleMove (e) {
    var dom = $(".contract_list");//可滚动区域
    var scrollTop = dom.scrollTop();//获取滚动的距离

    this.endClientY = e.touches[0].clientY;//更新手指当前屏幕Y轴位置--结束位置
    console.log("结束位置:",this.endClientY)

    //判断是否滚动到底部
    if (scrollTop - this.lastscrolltop > 0) {
        this.lastscrolltop = dom.scrollTop()
        console.log("继续滚动，scrollTop:", scrollTop)
    } else if (scrollTop != 0 && this.lastscrolltop !=0 && scrollTop - this.lastscrolltop == 0) {
        console.log("到底了!")
    }

    //判断手指滑动方向
    if(e.touches[0].clientY < this.startClientY){
        this.movedirection = "UP";
    }else if(e.touches[0].clientY > this.startClientY){
        this.movedirection = "DOWN";
    }else{
        this.movedirection = "CENTER";
    }
    console.log('手指方向:',this.movedirection)
    this.startClientY = e.touches[0].clientY;
    //判断是否滚动到底部
    if (scrollTop - this.lastscrolltop > 0) {
        this.lastscrolltop = dom.scrollTop()
        console.log("继续滚动，scrollTop:", scrollTop)
    } else if (scrollTop != 0 && this.lastscrolltop !=0 && scrollTop - this.lastscrolltop == 0) {
        console.log("到底了!")；
	//这里做一些事情
    }