javascript
jquery 手指滑动多半屏_JS拖拽专题(五)——「玩出花儿来」移动端滑动事件的封装...
歡迎來到我的JS拖拽專題系列文章，本章節將是拖拽系列的最后一篇。感謝大家的支持^_^
上一章節我們說到了拖拽讓圖片相互之間交換位置，相對來說是一個比較綜合的示例，涉及到了矩形的碰撞檢測，勾股定理計算兩點間的距離以及最小距離的獲取。
本章目標：
在移動端，我們經常會通過手指左滑，右滑，上滑，下滑去觸發一些操作，這種手指滑動操作我們稱之為swipe相關的事件。
先來看下今天要實現的效果吧！
一個簡單的滑動事件的示例
然后不巧的是，這些事件并不是原生就提供給我們使用的。而我們能夠使用之，是因為有人造好了輪子。
那么接下來我們也一起去造一下這個輪子吧，看看它和我們的拖拽有著怎樣千絲萬縷的聯系吧~
本次swipe相關事件是基于 偉大的jquery來實現的。所以我們先來了解一下jquery的插件擴展原理吧
jquery插件的擴展原理
熟悉jqeuery的特性的都知道，它是基于面向對象，插件的擴展內部原理其實就是在類為原型上添加自定義的方法。
$.fn.pluginName = function(){ ... do something}what?不是插件是在原型上擴展的嗎？？？
OK，為了驗證我的做法，老規矩，找源碼去。
作者在類下直接掛載了一個fn屬性，這個屬性和jQuery的原型對象相等，我們知道在jquery中，$ === jQuery的。所以，我們可以$.fn.pluginName = function(){}進行擴展
滑動事件swipe的介紹和封裝
分析一下，滑動的動作，手指按下，手指移動，手指抬起，實質是三個事件的合體，剛好和我們的拖拽三大事件不謀而合。
問題1：如何定義滑動的方向？
假如圓心為我們的手指的起始點，那么手指抬起的時候位置落在的區域如圖所示，我們就能輕松判斷出用戶的手指的滑動方向。
問題2：觸發最終滑動事件的條件是什么？比如向上滑動的判斷條件是什么？
接下來我們用代碼實現一下
我們定義擴展的插件名為swipe,于是就有了：
$.fn.swipe = function(type,fn){}其中type為我們要滑動的方向，比如：up, down ,left,top
依據上面的分析：在手指按下的時候，記錄手指的起始X和Y的坐標和起始時間
在手指抬起的時候，再次獲取當前的X，Y和時間
再分別計算出差值。
條件判斷
執行我們的fn函數
完整的代碼請私信我
這是我們封裝向上滑動的插件內部實現。同理，其它的方向的滑動只需要做細小的變動即可。這里不再贅述。
說明：插件的擴展還有一些默認的參數的配置，這些在本章節中不是主要，就不再細分下去了。有興趣的大家可以閱讀其它的swipe插件的封裝。比我這邊要復雜一些，但是原理和我分享的差不了。建議各位項目中還是用成熟的插件哦。
我這里只是想告訴大家這個輪子大概是怎么造出來的
插件的調用
var ul = $('#container ul');var iNow = 0;ul.swipe('up',()=>{console.log('up');iNow++;iNow = Math.min(5,iNow)ul.css({transform:'translateY('+-iNow * 100 +'vh)'});}).swipe('down',e=>{iNow--;iNow = Math.max(0,iNow)ul.css({transform:'translateY('+-iNow * 100 +'vh)'});})這里的swipe就是我們自己擴展的插件的方法。up是我們定義滑動的方向fn是滑動后的回調方法。
為什么我們定義的插件后，可以直接用ul.swipe方法呢？這個我們在文章的最前端已經說到，jquery 是基于面向對象的，var ul = $('#container ul');就相當于new jQuery()，也就是說ul是jQuery類的一個實例，而我們的插件是基于類的原型擴展出來的方法。所以我們可以直接通過ul.swipe來調用。
這里是【暢哥聊技術】JS拖拽專題系列技術文章的最后一個章節，在 web中，有關于拖拽的變形應用還有很多，但是萬變不離其蹤，掌握原理，其它都是浮云。我的系列文章只是記錄了我在工作中經常用到的案例。希望從中能幫助到大家。
最后感謝各位的支持，下一個系列專題分享還在準備中...
敬請期待！
(全文完)
總結
以上是生活随笔為你收集整理的jquery 手指滑动多半屏_JS拖拽专题(五)——「玩出花儿来」移动端滑动事件的封装...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： arduino char*转string
- 下一篇： python列表操作函数大全_Pytho