JS实现移动端判断上拉和下滑功能
2017-08-12 1217
一、手指触屏，利用touchstart和touchend计算前后滑动距离，判断是上拉还是下滑。
二、js中距离：pageY、clientY、offsetY的区别：
offsetY:相对于父节点的偏移距离。
clientY:相对于浏览器，滚轮距离不算在内。
pageY:相对于浏览器，滚轮滚动的距离算在内；本例中，用pageY，触屏时记录位置-startY，结束时记录-endY，两个相减以正负判断是上移还是下滑。
三、touchstart有touches属性，touchend有changedTouches属性，两个属性中分别有pageY、pageX信息。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | //滑动处理 var startX, startY; document.addEventListener('touchstart',function (ev) { startX = ev.touches[0].pageX; startY = ev.touches[0].pageY; }, false); document.addEventListener('touchend',function (ev) { var endX, endY; endX = ev.changedTouches[0].pageX; endY = ev.changedTouches[0].pageY; var direction = GetSlideDirection(startX, startY, endX, endY); switch(direction) { case 0: alert("无操作"); break; case 1: // 向上 alert("up"); break; case 2: // 向下 alert("down"); break; default: } }, false); |
四、
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function GetSlideDirection(startX, startY, endX, endY) { var dy = startY - endY; //var dx = endX - startX; var result = 0; if(dy>0) {//向上滑动 result=1; }else if(dy<0){//向下滑动 result=2; } else { result=0; } return result; } |
上一篇：JS实现简单短信验证码界面
下一篇：JS判断微信扫码的方法
