我正在开发一个 PhoneGap 项目,我们希望用户能够从列表中滑动项目。
JQueryMobile 有 .swipeleft() 和 .swiperight() 事件,但这些都是 bool 事件;他们要么开火,要么不开火。
我们想要变得“花哨”,当用户滑动时,我们将项目变得越来越红色。一旦达到某个临界点,它就会滑完剩下的路并逐渐消失。然后我们使用 .slideUp() 关闭其容器 div,消除空白空间。或者,用户可以放开该项目,该项目将滑回原位,并在返回原位时变成白色。
从概念上讲,我知道如何制作动画,但是是否有某种形式的 .swipeStart()/.swipeMove()/.swipeEnd() 功能可以 Hook 报告用户滑动了多远?如果是这样,我可以匹配项目的偏移和颜色来反射(reflect)用户从原点滑动的距离。
如有任何线索,我们将不胜感激!
最佳答案
示例
工作示例:http://jsfiddle.net/Gajotres/K69AJ/
代码
Javascript代码:
var gnStartX = 0;
var gnStartY = 0;
var gnEndX = 0;
var gnEndY = 0;
$(document).on('vmousedown', function(event){
gnStartX = event.pageX;
gnStartY = event.pageY;
event.preventDefault();
});
$(document).on('vmouseup', function(event){
gnEndX = event.pageX;
gnEndY = event.pageY;
var distance = Math.ceil(nthroot(Math.pow((gnEndX - gnStartX),2) + Math.pow((gnEndY - gnStartY),2), 2));
if(Math.abs(gnEndX - gnStartX) > Math.abs(gnEndY - gnStartY)) {
if(gnEndX > gnStartX) {
alert("Swipe Right - Distance " + distance + 'px');
} else {
alert("Swipe Left - Distance " + distance + 'px');
}
} else {
if(gnEndY > gnStartY) {
alert("Swipe Bottom - Distance " + distance + 'px');
} else {
alert("Swipe Top - Distance " + distance + 'px');
}
}
event.preventDefault();
});
function nthroot(x, n) {
try {
var negate = n % 2 == 1 && x < 0;
if(negate)
x = -x;
var possible = Math.pow(x, 1 / n);
n = Math.pow(possible, n);
if(Math.abs(x - n) < 1 && (x > 0 == n > 0))
return negate ? -possible : possible;
} catch(e){}
}
这是我的示例,它将为您提供方向和距离。使用的事件是vmousedown
和vmouseup
。它们是 jQuery Mobile 事件,用于在桌面和移动浏览器之间桥接触摸事件,基本上它可以在任何平台上工作。如果您只需要移动平台,则更改 vmousedown
-> touchstart
和 vmouseup
-> touchend
。
关于jquery - 在 HTML5/JQueryMobile/PhoneGap 中添加滑动支持,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16720880/