当前位置 : 主页 > 网络编程 > JavaScript >

HTML5之touch事件解决滑动到底及滑动方向

来源:互联网 收集:自由互联 发布时间:2021-06-30
touchEvent data(){ startClientY:0,//屏幕开始滑动位置 endClientY:0,//屏幕结束滑动位置 movedirection:'CENTER',//滑动方向 lastscrolltop:0,//上一次的滚动距离},handleStart (e){ this.lastscrolltop = 0;//解决再次开始
touchEvent
data(){
    startClientY:0,//屏幕开始滑动位置
    endClientY:0,//屏幕结束滑动位置
    movedirection:'CENTER',//滑动方向
    lastscrolltop:0,//上一次的滚动距离
},
handleStart (e){
    this.lastscrolltop = 0;//解决再次开始滑动时与scrollTop数据相同导致判断失误问题
    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;
    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("到底了!")
        /**
        * 这里可以做一些操作
        */
        this.lastscrolltop = dom.scrollTop();
    }

    //判断手指滑动方向
    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;//解决开始点击时判断有误问题
},
网友评论