1. 程式人生 > >HTML5移動端通過touch事件判斷手勢方向及頁面到達底部

HTML5移動端通過touch事件判斷手勢方向及頁面到達底部

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