无码日韩精品无码国产_一级做a爰片久久毛片潮喷_国产欧美国日产_久久9热re这里只有国产中文精品6_每天将为您更新成人影视在线看免费观看

Menu
小程序資訊
小程序資訊
微信小程序入門系列《四》:觸控事件
時(shí)間:2020-08-26 10:13:25

作者:瘋狂的貓

原文地址:http://www.cnblogs.com/nosqlcoco/p/5954453.html

》》》什么是事件

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

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

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

  • 事件對象可以攜帶額外信息,如id, dataset, touches。

》》》事件分類

  • touchstart 手指觸摸

  • touchmove 手指觸摸后移動

  • touchcancel 手指觸摸動作被打斷,如彈窗和來電提醒

  • touchend 手指觸摸動作結(jié)束

  • tap 手指觸摸后離開

  • longtap 手指觸摸后后,超過350ms離開

》》》事件綁定

事件綁定的寫法同組件的屬性,以 key、value 的形式。

  • key 以bind或catch開頭,然后跟上事件的類型,如bindtap, catchtouchstart

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

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

  • 單擊(tap)

  • 雙擊(dbtap)

  • 長按(longtap)

  • 滑動

  • 多點(diǎn)觸控

1.單擊

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

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

2.雙擊

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

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

 

3.長按

長按事件手指觸摸后,超過350ms再離開。

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

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

事件 觸發(fā)順序
單擊
咨詢
微信掃碼咨詢
電話咨詢
400-888-9358