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