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

Posted 2023-05-09

【中文标题】在 HTML5/JQueryMobile/PhoneGap 中添加滑动支持

【英文标题】：Adding swipe support in HTML5/JQueryMobile/PhoneGap

【发布时间】：2013-05-19 05:21:36

【问题描述】：

我正在处理一个 PhoneGap 项目，我们希望用户能够从列表中滑动项目。

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

我们想要“花哨”，当用户滑动时，我们将项目变得越来越红。一旦它达到某个断裂点，它就会滑过剩下的路并逐渐消失。然后我们将使用 .slideUp() 关闭其容器 div，消除空白空间。或者，用户可以放手，项目将滑回原位，并在它回到原位时变成白色。

从概念上讲，我知道如何制作动画，但是是否有某种形式的 .swipeStart() / .swipeMove() / .swipeEnd() 功能我可以挂钩到报告用户滑动了多远？如果是这样，我可以匹配项目的偏移量和颜色，以反映用户从原点滑动了多远。

任何线索将不胜感激！

【参考方案1】：

示例

工作示例：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。

【讨论】：

这几乎是完美的！但是，有什么方法可以在您滑动时报告进度吗？现在它似乎只有在你停止滑动时才会触发。例如，您可以在滑动时将 margin-left 设置为等于您的滑动距离吗？

太棒了！我稍微调整了一下，让它更接近我的意思。但我现在明白了 - 谢谢你的例子！

另一个更新：我对其进行了调整以更接近我的目标：jsfiddle.net/2dA3g/8。现在，一旦用户放手，我只需让它动画回到 margin-left:0px。