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

最新推荐文章于 2024-06-10 17:22:17 发布

原创最新推荐文章于 2024-06-10 17:22:17 发布 · 5.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #html5 #移动

js 同时被 2 个专栏收录

8 篇文章

订阅专栏

HTML5

4 篇文章

订阅专栏

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

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("到底了!")；
	//这里做一些事情
    }