在jQuery-mobile中計算滑動距離

我希望你今天很好，我正在嘗試計算移動網站上的滑動距離（觸摸手勢），你將如何計算出用戶在屏幕上滑動了多少像素？在jQuery-mobile中計算滑動距離

$('.cmButtons').live('swipeleft',function(){ 
    console.log("swiped left"); 
});

來源

2011-08-03 Xavier

我只知道如何做到這一點不使用jQuery，所以這不是一個答案，但也許是一個線索。在touchStart事件中建立滑動的起始x，y座標。在那裏，您也可以將startPos分配給endPos，默認結束位置。在touchMove監聽器中，您不斷注意當前座標，並將這些座標作爲endPos座標。 touchEnd你注意到了startPos和endPos之間的區別。因此，無論是jQuery在其swipeLeft事件中公開startPos和endPos座標，還是必須連接自己的插件才能在jQuery之外完成此操作。 – Tim

請問你可以添加一些示例代碼嗎？我明白，它可能會略有不同，但我想用你的代碼作爲基礎開始:) – Xavier

相關：http://stackoverflow.com/questions/3183872/does-jquery-preserve-touch-events-properties和http：// stackoverflow。com/questions/4755505/how-to-recogized-touch-event-using-jquery-for-ipad-safari-browser-is-it-possible –

不知道這是否有助於但Beta 2中，他們已經發布了一些額外的刷卡功能

http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/

配置刷卡事件閾值增加

有是一個數字在 jquery.mobile.event.js滑動代碼中的硬編碼常量。對於需要調整這些常數以允許更大的垂直位移並且仍然註冊滑動的開發者，這個新功能允許它們被調整。感謝爲mlitwin的貢獻。

scrollSupressionThreshold（默認：10px的） - 比這個水平位移更多，我們將抑制滾動

durationThreshold（默認：1000毫秒） - 比這更多的時間，這是不是一個刷卡

horizontalDistanceThreshold（默認：30px） - 水平滑動位移必須超過此值。

verticalDistanceThreshold（默認值：75px） - 滑動垂直位移必須小於此值。

來源

2011-08-04 14:07:19

最後，我不得不在jQuery Mobile中編寫一個自定義偵聽器，該觸發器會在開始點擊時觸發 - 輕掃和輕敲 - 滑動事件。感謝您的提交。這讓我開始在正確的地方。 – Xavier

np。你也可以分享你自定義的聽衆嗎？也可以幫助其他人 –

我建議jQuery的優秀插件TouchSwipe由馬特·布賴森：http://labs.skinkers.com/touchSwipe/。

它已觸摸& 4個方向和1或2個手指的滑動事件。它有SwipeStatus與您可以得到刷卡距離：http://labs.skinkers.com/touchSwipe/demo/Swipe_status.html

來源

2011-11-12 19:28:15

謝謝:)它有幫助。 – nagesh

現在這些鏈接似乎已經死了 – Carl

我無法弄清楚如何從該方法中獲取距離，所以我只是在我的頁面上設置一個新的全局閾值。

//Override the default horizontalDistanceThreshold of 30 
$.event.special.swipe.horizontalDistanceThreshold = 200;

我使用的是舊版本的jQM（v1.0仍...），所以這可能已經改變了。如果您剛開始查找滑動事件，在源代碼中很容易找到。

來源

2012-08-29 18:17:15 jocull

在jQuery-mobile中計算滑動距離

回答

相關問題