一、手指触屏,利用touchstart和touchend计算前后滑动距离,判断是上拉还是下滑。
二、js中距离:pageY、clientY、offsetY的区别:
offsetY:相对于父节点的偏移距离。
clientY:相对于浏览器,滚轮距离不算在内。
pageY:相对于浏览器,滚轮滚动的距离算在内;本例中,用pageY,触屏时记录位置-startY,结束时记录-endY,两个相减以正负判断是上移还是下滑。
三、touchstart有touches属性,touchend有changedTouches属性,两个属性中分别有pageY、pageX信息。
- //滑动处理
- 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);
四、
- 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实现移动端判断上拉和下滑功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/120557.htm