這篇文章主要介紹了微信小程序中觸控事件的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

為柳城等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及柳城網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、柳城網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

微信小程序 觸控事件：

微信小程序的"事件"挺有意思。看了說(shuō)明文檔后發(fā)現(xiàn)它的功能很全，事件可以向父節(jié)點(diǎn)傳遞，而且打印這個(gè)事件的信息很透明，調(diào)試起來(lái)應(yīng)該非常方便。

什么是事件

1. 事件是視圖層到邏輯層的通訊方式。

2. 事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。

3. 事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。

4. 事件對(duì)象可以攜帶額外信息，如id, dataset, touches。

事件的使用方式

在組件中綁定一個(gè)事件處理函數(shù)。

如bindtap，當(dāng)用戶點(diǎn)擊該組件的時(shí)候會(huì)在該頁(yè)面對(duì)應(yīng)的Page中找到相應(yīng)的事件處理函數(shù)。

<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>

在相應(yīng)的Page定義中寫(xiě)上相應(yīng)的事件處理函數(shù)，參數(shù)是event。

Page({ 
 tapName: function(event) { 
 console.log(event) 
 } 
})

可以看到log出來(lái)的信息大致如下：

{ 
"type": "tap", 
"timeStamp": 1252, 
"target": { 
 "id": "tapTest", 
 "offsetLeft": 0, 
 "offsetTop": 0, 
 "dataset": { 
 "hi": "MINA" 
 } 
}, 
"currentTarget": { 
 "id": "tapTest", 
 "offsetLeft": 0, 
 "offsetTop": 0, 
 "dataset": { 
 "hi": "MINA" 
 } 
}, 
"touches": [{ 
 "pageX": 30, 
 "pageY": 12, 
 "clientX": 30, 
 "clientY": 12, 
 "screenX": 112, 
 "screenY": 151 
}], 
"detail": { 
 "x": 30, 
 "y": 12 
} 
}

事件詳解

事件分類(lèi)

事件分為冒泡事件和非冒泡事件：

冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件會(huì)向父節(jié)點(diǎn)傳遞。

非冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件不會(huì)向父節(jié)點(diǎn)傳遞。

事件分類(lèi)

1. touchstart 手指觸摸

2. touchmove 手指觸摸后移動(dòng)

3. touchcancel 手指觸摸動(dòng)作被打斷，如彈窗和來(lái)電提醒

4. touchend 手指觸摸動(dòng)作結(jié)束

5. tap 手指觸摸后離開(kāi)

6. longtap 手指觸摸后后，超過(guò)350ms離開(kāi)

事件綁定

事件綁定的寫(xiě)法同組件的屬性，以 key、value 的形式。

1. key 以bind或catch開(kāi)頭，然后跟上事件的類(lèi)型，如bindtap, catchtouchstart

2. value 是一個(gè)字符串，需要在對(duì)應(yīng)的 Page 中定義同名的函數(shù)。不然當(dāng)觸發(fā)事件的時(shí)候會(huì)報(bào)錯(cuò)。 bind事件綁定不會(huì)阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

上面簡(jiǎn)單介紹了小程序事件基礎(chǔ)，是時(shí)候彰顯"事件"的威力：

1. 單擊(tap)

2. 雙擊(dbtap)

3. 長(zhǎng)按(longtap)

4. 滑動(dòng)

5. 多點(diǎn)觸控

1.單擊

單擊事件由touchstart、touchend組成,touchend后觸發(fā)tap事件。

<view>
 <button type="primary" bindtouchstart="mytouchstart" bindtouchend="mytouchend" bindtap="mytap">點(diǎn)我吧</button>
</view>
mytouchstart: function(e){ console.log(e.timeStamp + '- touch start')
},mytouchend: function(e){ console.log(e.timeStamp + '- touch end')
},mytap: function(e){ console.log(e.timeStamp + '- tap')
}

2.雙擊

雙擊事件由兩個(gè)單擊事件組成，兩次間隔時(shí)間小于300ms認(rèn)為是雙擊；微信官方文檔沒(méi)有雙擊事件，需要開(kāi)發(fā)者自己定義處理。

<view>
 <button type="primary" bindtap="mytap">點(diǎn)我吧</button>
</view>

3.長(zhǎng)按

長(zhǎng)按事件手指觸摸后，超過(guò)350ms再離開(kāi)。

<view>
 <button type="primary" bindtouchstart="mytouchstart" bindlongtap="mylongtap" 
 bindtouchend="mytouchend" bindtap="mytap">點(diǎn)我吧</button>
</view>
mytouchstart: function(e){ console.log(e.timeStamp + '- touch start')
},//長(zhǎng)按事件mylongtap: function(e){ console.log(e.timeStamp + '- long tap')
 },mytouchend: function(e){ console.log(e.timeStamp + '- touch end')
},mytap: function(e){ console.log(e.timeStamp + '- tap')
}

單擊、雙擊、長(zhǎng)按屬于點(diǎn)觸事件，會(huì)觸發(fā)touchstart、touchend、tap事件，touchcancel事件只能在真機(jī)模擬，不多說(shuō)了。

事件	觸發(fā)順序
單擊	touchstart → touchend → tap
雙擊	touchstart → touchend → tap → touchstart → touchend → tap
長(zhǎng)按	touchstart → longtap → touchend → tap

4.滑動(dòng)

手指觸摸屏幕并移動(dòng)，為了簡(jiǎn)化起見(jiàn)，下面以水平滑動(dòng)和垂直滑動(dòng)為例。 滑動(dòng)事件由touchstart、touchmove、touchend組成

坐標(biāo)圖：

1. 以屏幕左上角為原點(diǎn)建立直角坐標(biāo)系。第四象限為手機(jī)屏幕，Y軸越往下坐標(biāo)值越大（注意跟數(shù)學(xué)象限的區(qū)別）。

2. 假設(shè)A點(diǎn)為touchstart事件觸摸點(diǎn)，坐標(biāo)為A(ax,ay)，然后手指向上滑動(dòng)到點(diǎn)B(bx,by)，就滿足條件by < ay;

3. 同理，向右滑動(dòng)到C(cx,cy),滿足cx > ax；向下滑動(dòng)到D(dx,dy),滿足dy > ay；向左移動(dòng)到E(ex，ey)滿足ex < ax.

4. 計(jì)算線段AB在Y軸上投影長(zhǎng)度為m,在X軸上的投影長(zhǎng)度為n

5. 計(jì)算r = m/n,如果r > 1,視為向上滑動(dòng)。

6. 同理計(jì)算線段AC,AD,AE在Y軸投影長(zhǎng)度與X軸的投影長(zhǎng)度之比，得出向右向下向左的滑動(dòng)。

以上沒(méi)考慮r為1的情況。

<view>
 <button type="primary" bindtouchstart="mytouchstart" bindtouchmove="mytouchmove">點(diǎn)我吧</button>
</view>

5.多點(diǎn)觸控

由于模擬器尚不支持多點(diǎn)觸控，內(nèi)測(cè)開(kāi)放后，繼續(xù)補(bǔ)充。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“微信小程序中觸控事件的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

網(wǎng)頁(yè)名稱(chēng)：微信小程序中觸控事件的示例分析-創(chuàng)新互聯(lián)
鏈接URL：http://chinadenli.net/article28/cogcjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、響應(yīng)式網(wǎng)站、網(wǎng)站營(yíng)銷(xiāo)、域名注冊(cè)、App設(shè)計(jì)、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)