向左/向右滑動網頁

Question

我有一系列枚舉的網頁，此刻，我在每個頁面上都有一個左右箭頭圖標，以導航到系列中的上一頁/下一頁。

我的問題：什麼是最簡單的（！）方式來實現滑動左/右手勢做同樣的事情？ （沒有其他手勢 - 請不要複雜的解決方案，我是一個血腥的新手！）

非常感謝您提前爲您的答案！

Answer 1

簡單地存儲第一點用戶降落：

var start = null; 
window.addEventListener("touchstart",function(event){ 
    if(event.touches.length === 1){ 
     //just one finger touched 
     start = event.touches.item(0).clientX; 
    }else{ 
     //a second finger hit the screen, abort the touch 
     start = null; 
    } 
    }); 

然後如果手指左派屏幕，檢查偏移高於值：

window.addEventListener("touchend",function(event){ 
    var offset = 100;//at least 100px are a swipe 
    if(start){ 
     //the only finger that hit the screen left it 
     var end = event.changedTouches.item(0).clientX; 

     if(end > start + offset){ 
     //a left -> right swipe 
     } 
     if(end < start - offset){ 
     //a right -> left swipe 
     } 
    } 
    }); 

您可以添加額外的檢查例如如果delta y（客戶端Y）停留在一定數量以下，或者觸摸移動僅沿一個方向進行。但是，這是可選的，取決於你是否需要與另一個滑動操作區分開來。你也可以進行必要的刷卡dependend關閉頁面寬度，例如：

var offset = window.clientX * 0.9; // the swipe mist be 90% of the windows size 

Test it