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

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

1、實現原理

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

<
div 
id="viewport"
class
="viewport"
>
<
div 
class
="pageview"
style
="background: #3b76c0"
>
<
h3 >頁面-1
h3>
div>
<
div 
class
="pageview"
style
="background: #58c03b;"
>
<
h3>頁面-2
h3>
div>
<
div 
class
="pageview"
style
="background: #c03b25;"
>
<
h3>頁面-3
h3>
div>
<
div 
class
="pageview"
style
="background: #e0a718;"
>
<
h3>頁面-4
h3>
div>
<
div 
class
="pageview"
style
="background: #c03eac;"
>
<
h3>頁面-5
h3>
div>
div>

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劉海屏適配

相關推薦