背景：

基於要嘗試的移動端項目需要有一個通過上拉下滑手勢達成加載不同數據的功能，其涉及到滑動手勢和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方面的控制，需要自己再改善。而其他兩個例子有給我啟發的地方。而且那兩個例子的相關講解也很詳細，是值得記錄的。

關於移動端滑動手勢