Question

手机网页手指滑动页面实现上下翻页

请问您的问题解决了吗？我现在也需要写这个效果，可以指点一下我吗？最好能给下源码。谢谢！

Answer 1

var playGround = $('#playGround'), // 要使用滑动的元素
isStart = false,
isMove = false,
startX = 0,
startY = 0,
dx = 0,
dy = 0,
x = 0,
y = 0;

playGround.bind('touchstart', function (e) {
isStart = true;
startX = e.targetTouches ? e.targetTouches[0].clientX : e.clientX;
startY = e.targetTouches ? e.targetTouches[0].clientY : e.clientY;
dx = 0;
dy = 0;
});

playGround.bind('touchmove', function (e) {
$.preventDefault(e);

if (!isStart) {
return;
}

x = e.targetTouches ? e.targetTouches[0].clientX : e.clientX;
y = e.targetTouches ? e.targetTouches[0].clientY : e.clientY;
dx = x- startX;
dy = y - startY;

if (isMove || (Math.abs(dy) > Math.abs(dx))) {
isMove = true;
} else {
isStart = false;
}
});

playGround.bind('touchend', function (e) {
if (isStart && isMove) {
$.preventDefault(e);
if (dy > 0) {
// 执行往下翻页的方法。

down();
} else if (dy < 0) {
// 执行往上翻页的方法。
up();
}
}
isStart = false;
isMove = false;
});

追问

谢谢你的热心回答，不过我看不懂，有点复杂。我的案例就是几个页面之间需要用手指触屏滑动上下翻页。你写的我看不懂。。。

追答

=。=
我上面代码是复杂了点。。。
实在不行的话，你用zepto.js吧，里面内置了swipe, swipeLeft, swipeRight, swipeUp, swipeDown等事件，当元素被划过时触发。你需要用到的是swipeUp, swipeDown。
$('body').swipeUp(function(){
up();
});

$('body').swipeDown(function(){
down();
});
参考网址：http://www.css88.com/doc/zeptojs_api/#touch