首頁  >  文章  >  微信小程式  >  微信開發入門(四)觸控事件

微信開發入門(四)觸控事件

零下一度
零下一度原創
2017-05-23 15:30:351965瀏覽

》》》什麼是事件

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

  • 事件可以將使用者的行為回饋到邏輯層進行處理。

  • 事件可以綁定在元件上,當達到觸發事件,就會執行邏輯層中對應的事件處理函數。

  • 事件物件可以攜帶額外訊息,如id, dataset, touches。

》》》事件分類

  • touchstart 手指觸摸

  • touchmove 手指觸摸後移動

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

  • touchend 手指觸摸動作結束

  • #tap 手指觸摸後離開

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

》》事件綁定

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

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

  • value 是一個字串,需要在對應的Page 中定義同名的函數。不然觸發事件的時候會報錯。 bind事件綁定不會阻止冒泡事件向上冒泡,catch事件綁定可以阻止冒泡事件向上冒泡。

上面簡單介紹了小程式事件基礎,是時候彰顯"事件"的威力:

  • 點擊(tap)

  • 雙擊(dbtap)

  • 長按(longtap)

  • 滑動

  • ##多點觸控

1.點選

點選事件由touchstart、touchend組成,touchend後觸發tap事件。

<view>
  <button type="primary" bindtouchstart="mytouchstart" bindtouchend="mytouchend" bindtap="mytap">点我吧</button>
</view>
mytouchstart: function(e){    console.log(e.timeStamp + &#39;- touch start&#39;)
},mytouchend: function(e){    console.log(e.timeStamp + &#39;- touch end&#39;)
},mytap: function(e){    console.log(e.timeStamp + &#39;- tap&#39;)
}

2.雙擊

雙擊事件由兩個點擊事件組成,兩次間隔時間小於300ms認為是雙擊;微信官方文件沒有雙擊事件,需要開發者自己定義處理。

<view>
  <button type="primary" bindtap="mytap">点我吧</button>
</view>

 

3.長按

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

<view>
  <button type="primary" bindtouchstart="mytouchstart" bindlongtap="mylongtap" 
    bindtouchend="mytouchend" bindtap="mytap">点我吧</button>
</view>
mytouchstart: function(e){    console.log(e.timeStamp + &#39;- touch start&#39;)
},//长按事件mylongtap: function(e){    console.log(e.timeStamp + &#39;- long tap&#39;)
  },mytouchend: function(e){    console.log(e.timeStamp + &#39;- touch end&#39;)
},mytap: function(e){    console.log(e.timeStamp + &#39;- tap&#39;)
}

點擊、雙擊、長按屬於點觸事件,會觸發touchstart、touchend、tap事件,touchcancel事件只能在真機模擬,不多說了。

事件觸發順序#點擊touchstart → touchend → tap雙擊touchstart → touchend → tap → touchstart → touchend → tap##長按4.滑動
touchstart → longtap → touchend → tap

手指觸摸螢幕並移動,為了簡化起見,下面以水平滑動和垂直滑動為例。 滑動事件由touchstart、touchmove、touchend組成

#座標圖: 

##############################################################################################以螢幕左上角為原點建立直角座標系。第四象限為手機螢幕,Y軸越往下座標值越大(注意跟數學象限的差異)。 ############假設A點為touchstart事件觸摸點,座標為A(ax,ay),然後手指向上滑動到點B(bx,by),就滿足條件by 9ff620509ba814a8fd219ad814a49f54 ax;向下滑動到D(dx,dy),滿足dy > ay;向左移動到E(ex,ey)滿足ex 953a12d07b63465dafa9273702c90f37 1,視為向上滑動。 ############同理計算線段AC,AD,AE在Y軸投影長度與X軸的投影長度之比,得出向右向下向左的滑動。 ############以上沒考慮r為1的情況。 ###
<view>
  <button type="primary"  bindtouchstart="mytouchstart" bindtouchmove="mytouchmove">点我吧</button>
</view>
############5.多點觸控######由於模擬器尚不支援多點觸控,內測開放後,繼續補充。 ######【相關推薦】######1. ###微信公眾號平台源碼下載##########2. ###微信投票源碼####### ###3.### 微信啦啦外送2.2.4解密開源版微信魔術方塊原始碼######

以上是微信開發入門(四)觸控事件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn