jQuery – TouchSwipe 簡單支援 Swipe 滑動手勢的偵測

2018-06-15 / JSN / 1 Comment / 3,416 次瀏覽

現在做 WebAPP 簡直是家常便飯的時候了，要把 Web 做成更高的易用性，jQuery 在今天還是非常好懂得工具而且超方便，尤其是這種滑動的套件，真的是太簡單了。如果要在手機拖曳的話，請看這篇。

使用套件：TouchSwipe-Jquery-Plugin

或是使用 npm 裝到開發環境裡

npm install jquery-touchswipe --save

使用方式

$("#test").swipe({
    threshold: 0,
    swipe:function(event, direction, distance, duration, fingerCount, fingerData, currentDirection) {
        console.log([event, direction, distance, duration, fingerCount, fingerData, currentDirection]);
      
        $(this).text("滑動方向 " + direction );  
    }
});

// 額外設定，例如手指頭支援的數量
$("#test").swipe( {fingers:2} );

swipe() 回傳的參數

• event 事件
• direction 滑動的方向，如果是點擊的話，會是 null
• distance 滑動的距離
• duration 滑動持續的時間
• fingerCount 使用的手指頭數量
• fingerData 在事件中手指頭的座標
• currentDirection 使用者正在滑動的當前方向，目前看起來與 distance 一樣，不知道差別在哪….

選用的參數與支援的方法可以參考官方的設定。

通常我會把 threshold 設定為 0。這樣當滑動大於 0px 的時候，就會觸發事件，預設的滑動要大於 75px 才會觸發。