HTML5移動端通過touch事件判斷手勢方向及頁面到達底部
阿新 • • 發佈:2019-01-25
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");//可滾動區域 varscrollTop = 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("到底了!");
//這裡做一些事情
}