一、前言
這幾個月事情比較多，寫了一些博客都沒有來得及整理發(fā)布，今天剛好有一位同事在開發(fā)前端頁面的時候用到了手勢判斷。所以翻出了之前寫的 demo，順便整理一下作為記錄。
手勢判斷在各種應(yīng)用中都十分常見，如 APP 中的手勢翻頁，前進(jìn)后退等等，如微博做得就特別好，微信的話就不想吐槽了。不扯太遠(yuǎn)，H5 開發(fā)中手勢判斷一般多用于一些交互比較靈活的場景，例如大轉(zhuǎn)盤抽獎游戲，旋轉(zhuǎn)菜單，酷跑，打磚塊游戲等等。今天不具體到這些小游戲的開發(fā)，我們重點(diǎn)講講實(shí)現(xiàn)的原理。其實(shí)比較基礎(chǔ)，大神請自動忽略。
二、實(shí)現(xiàn)原理
前提事件，所謂手勢，就是你的手對于屏幕觸摸的方向或者說軌跡。其實(shí)移動端只不過是用戶的手指代替了 PC 端的鼠標(biāo)。所以如果你做過 PC 端頁面的鼠標(biāo)軌跡判斷，那移動端的手勢判斷思路也就可以秒殺了。
上面我們提到，要對用戶手指對屏幕的操作進(jìn)行捕捉，在 H5 中提供了這樣幾個關(guān)鍵的事件監(jiān)聽 touchstart、touchmove、touchend。因?yàn)楸容^基礎(chǔ)我下面就簡單帶過了。
首先
網(wǎng)友評論
