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

2022-05-03 02:42:09 字數 1771 閱讀 3834

摘自:

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單頁面手勢滑屏切換是採用html5 觸控事件 touch 和 css3動畫 transform,transition 來實現的,效果圖如下所示,本文簡單說一下其實現原理和主要思路。1 實現原理 假設有5個頁面,每個頁面佔螢幕100 寬,則建立乙個div容器viewport,將其寬度 width ...

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

h5單頁面手勢滑屏切換是採用html5 觸控事件 touch 和 css3動畫 transform,transition 來實現的,效果圖如下所示,本文簡單說一下其實現原理和主要思路。假設有5個頁面,每個頁面佔螢幕100 寬,則建立乙個div容器viewport,將其寬度 width 設定為500 ...

H5頁面在iPhoneX劉海屏適配

iphone x和ios 11的發布,不僅在許多技術方面造成了一定的衝擊,前端也不可以避免地也受到影響,因為iphone x劉海的影響,在編寫前端頁面的時候要做一些處理,下面先提出一些新的概念。iphone x 無論是在螢幕尺寸 解析度 甚至是形狀上都發生了較大的改變,下面以iphone 8作為參照...