在HTML5 / JQueryMobile / PhoneGap中添加滑动支持

时间:2013-05-23 18:04:15

标签: jquery jquery-mobile cordova swipe

我正在开发一个PhoneGap项目,我们希望用户能够从列表中滑动项目。

JQueryMobile具有.swipeleft()和.swiperight()的事件,但这些是布尔事件;他们要么开火,要么不开火。

我们希望得到“花哨”,当用户滑动时,我们将项目变得越来越红。一旦达到某个突破点,它将在剩下的路上滑动并逐渐消失。然后我们使用.slideUp()来关闭它的容器div,消除空的空间。或者,用户可以放开,物品将滑回原位,在返回原位时变为白色。

从概念上讲,我知道如何制作动画,但是我可以使用某种形式的.swipeStart()/ .swipeMove()/ .swipeEnd()函数来报告用户刷了多远?如果是这样,我可以匹配项目的偏移量和颜色,以反映用户从原点滑过的距离。

任何线索都将不胜感激!

1 个答案:

答案 0 :(得分:5)

实施例

工作示例: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 - &gt; touchstart vmouseup - &gt;的 touchend