微信小程式的三類事件範例程式碼

本文主要介紹微信小程式中的三類事件，並用程式碼給予示範。

小程式的事件主要有三種：
1-點選事件

2-雙擊事件

3-長按事件

#點選事件由touchstart、touchend組成,touchend後觸發tap事件。
（1）點擊事件

view程式碼

<view>
  <button type="primary" bindtouchstart="mytouchstart" bindtouchend="mytouchend" bindtap="mytap">点我吧</button>
</view>

JS程式碼

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')
}

這裡透過bindtouchstart函數綁定了觸控開始的事件，bindtouchend函數綁定了觸摸結束時觸發的事件。
並且可以在js程式碼中去實作這兩個事件函數的內容。

（2）雙擊事件

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


點我吧 

JS程式碼

(3)長按

長按事件手指觸摸後，超過350ms再離開。
view程式碼

<view>
  <button type="primary" bindtouchstart="mytouchstart" bindlongtap="mylongtap"
    bindtouchend="mytouchend" bindtap="mytap">点我吧</button>
</view>

JS程式碼

mytouchstart: function(e){   
 console.log(e.timeStamp + '- touch start')
},
//长按事件
mylongtap: function(e){   
 console.log(e.timeStamp + '- long tap')
},
 console.log(e.timeStamp + '- touch end')
},
mytap: function(e){   
 console.log(e.timeStamp + '- tap')
}

#更多微信小程式的三類事件範例程式碼相關文章請關注PHP中文網！