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

来源:互联网 发布:js获取今天年月日 编辑:程序博客网 时间:2024/06/13 00:57

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