H5單頁面手勢滑屏切換原理

摘自：

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

1、實現原理

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

css樣式：

.viewport

註冊touchstart,touchmove和touchend事件，當手指在螢幕上滑動時,使用css3的transform來實時設定viewport的位置，比如要顯示第二個頁面，就設定viewport的transform:translate3d(100%,0,0) 即可，在這裡我們使用translate3d來代替translatex，translate3d可以主動開啟手機gpu加速渲染，頁面滑動更流暢。

2、主要思路

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

手指放在螢幕上：ontouchstart

手指在螢幕上滑動：ontouchmove

手指離開螢幕：ontouchend

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

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

/*手指放在螢幕上*/
document.addeventlistener("touchstart",function(e).bind(this),false);

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

/*手指在螢幕上滑動，頁面跟隨手指移動*/
document.addeventlistener("touchmove",function(e)
direction = deltax>0?"right":"left"; //判斷手指滑動的方向
}}.bind(this),false);

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

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

/*手指離開螢幕時，計算最終需要停留在哪一頁*/
document.addeventlistener("touchend",function(e)else else
}//執行滑動，讓頁面完整的顯示到螢幕上
this.transform.call(viewport,translate);
}}.bind(this),false);

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

//計算當前的頁碼
pagenow = math.round(math.abs(translate) / pagewidth) + 1;
settimeout(function().bind(this),100);

H5單頁面手勢滑屏切換原理

H5單頁面手勢滑屏切換原理

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

H5頁面在iPhoneX劉海屏適配

H5單頁面手勢滑屏切換原理

H5單頁面手勢滑屏切換原理

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

H5頁面在iPhoneX劉海屏適配

相關推薦