離開當前頁面 H5單頁面手勢滑屏切換原理

h5單頁面手勢滑屏切換是採用html5 觸控事件(touch) 和 css3動畫(transform,transition)來實現的，效果圖如下所示，本文簡單說一下其實現原理和主要思路。

假設有5個頁面，每個頁面佔螢幕100%寬，則建立乙個div容器viewport，將其寬度(width) 設定為500%，然後將5個頁面裝入容器中，並讓這5個頁面平分整個容器，最後將容器的預設位置設定為0,overflow設定為hidden,這樣螢幕就預設顯示第乙個頁面。

css樣式：

註冊touchstart,touchmove和touchend事件，當手指在螢幕上滑動時,

使用css3的transform來實時設定viewport的位置，比如要顯示第二個頁面，就設定viewport的transform:translate3d(100%,0,0) 即可，

在這裡我們使用translate3d來代替translatex，translate3d可以主動開啟手機gpu加速渲染，頁面滑動更流暢。

從手指放在螢幕上、滑動操作、再到離開螢幕是乙個完整的操作過程，對應的操作會觸發如下事件：

手指放在螢幕上：ontouchstart手指在螢幕上滑動：ontouchmove手指離開螢幕：ontouchend

我們需要捕獲觸控事件的這三個階段來完成頁面的滑動：

ontouchstart: 初始化變數, 記錄手指所在的位置,記錄當前時間

ontouchmove: 獲得當前所在位置，計算手指在螢幕上的移動差量deltax,然後使頁面跟隨移動

ontouchend:手指離開螢幕時，計算螢幕最終停留在哪一頁。首先計算手指在螢幕上的停留時間deltat,如果deltat<300ms，則認為是快速滑動，相反則是慢速滑動，快速滑動和慢速滑動的處理是不同的：

a、如果是快速滑動，則讓當前頁面完整的停留在螢幕**(需要計算當前頁面還有多少需要滑動)

除此之外，還要計算當前頁面是第幾頁，並設定當前頁碼

基本的思路就這些，當然在實際操作過程中還有一些細節需要注意。