關於移動端滑動手勢

標籤：相關   描述   功能   資料載入   拖拽   wordpress   瞭解   資料   www   

背景：

基於要嘗試的移動端項目需要有一個通過上拉下滑手勢達成載入不同資料的功能，其涉及到滑動手勢和ajax資料載入方面的知識點。故對整個實現過程做一個記錄整理。個人JS功底有限，看了諸多例子和對於移動端手勢知識點梳理的技術部落格才對做到了對功能的實現。並且也在這個過程中，才初步瞭解到了移動端架構Zepto.js。_(:з」∠)_ 當然，最後還是選擇了盡量用原生來實現這一個功能，只因為這樣才能夠對整個功能實現原理理解上更充分些，想盡量少依賴於外掛程式。不過到了資料載入上，因為時間成本等原因最後還是用上了JQuery來實現ajax的部分。

 

描述：通過單手指向下或向上滑動，上一周或下一周資料重新整理，載入出當前周數頁面的上一周或下一周資料資訊。

實現：1.擷取手指觸碰到螢幕時的座標 (x，y)；

　　　2.在限定單手指觸碰的大前提下再擷取移動後手指在螢幕的座標位置(x1，y2)；

　　　3.使用if來控制座標 (x，y)與結束座標(x1，y2)之間的垂直與水平數值差距，將滑動範圍限定起來；

　　　4.合格可載入出相應指定資料。

 

相關連結：

原生JS實現觸摸滑動事件 http://dobit.top/Detail/109.html

玩轉H5上拉下滑動效 https://isux.tencent.com/h5-drop-down-effect-slide.html

開源移動端元素拖拽慣性彈動以及下拉載入兩個JS http://www.zhangxinxu.com/wordpress/2017/01/mobile-phone-drag-drop-inertia-loading/

 

基本是簡化了 原生JS實現觸摸滑動事件 的代碼來實現滑動動效的。並且關於if方面的控制，需要自己再改善。而其他兩個例子有給我啟發的地方。而且那兩個例子的相關講解也很詳細，是值得記錄的。

 

 

 

 

 

關於移動端滑動手勢