您的位置:首页 > 其它

滑动操作

2015-11-16 11:44 260 查看
var startX, startY, isStart; //在外部声明startX以用于touchmove和touchend的函数中

$('nav').on('touchstart', function(evt) { //手指按倒屏幕上的坐标
var target = evt.targetTouches[0] || evt.changedTouches[0]; //0表示取第一个手指即单指触摸
startX = target.pageX;
startY = target.pageY;
isStart = 1;
});

$('nav').on('touchmove', function(evt) { //手指滑动到屏幕上的坐标
if(1 !== isStart) {
return;
} else {
isStart = 2;
}
var target = evt.targetTouches[0] || evt.changedTouches[0];
var moveX = target.pageX;
var moveY = target.pageY;
var offsetX = moveX - startX;
var absX = Math.abs(offsetx); //X方向上的偏移量
var absY = Math.abs(moveY - startY); //Y方向上的偏移量
if(absX > absY) {
evt.preventDefault(); //水平滑动时阻止垂直方向的偏移量
}
});

$('nav').on('touchend touchcancel', function(evt) {
if(2 !== isStart) {
return; //若只有点击操作而无滑动则不执行下面操作
} else {
isStart = undefined;
}
var target = evt.targetTouches[0] || evt.changedTouches[0];
var endX = target.pageX;
var offsetX = endX - startX;
if(offsetX > 30) {
prev(); //水平向右滑动超过一定距离执行上一页
} else if(offset < -30) {
next(); //水平向左滑动超过一定距离执行下一页
} else {
return;
}
});


通过手指触摸屏幕和离开屏幕的坐标差来定义滑动
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: