微信小程式 觸控事件詳細介紹

微信小程式 觸控事件：

微信小程式的"事件"挺有意思。看了說明文件後發現它的功能很全，事件可以向父節點傳遞，而且列印這個事件的資訊很透明，除錯起來應該非常方便。

接下來把文件copy過來

原文位址：

》什麼是事件

事件的使用方式

在元件中繫結乙個事件處理函式。

如bindtap，當使用者點選該元件的時候會在該頁面對應的page中找到相應的事件處理函式。

click me!  

在相應的page定義中寫上相應的事件處理函式，引數是event。

page(

})可以看到log出來的資訊大致如下：

}, "currenttarget":

}, "touches": ,

"detail":

}事件詳解

事件分類

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

冒泡事件：當乙個元件上的事件被觸發後，該事件會向父節點傳遞。

非冒泡事件：當乙個元件上的事件被觸發後，該事件不會向父節點傳遞。

》事件分類

》事件繫結

事件繫結的寫法同元件的屬性，以 key、value 的形式。

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

1.單擊

單擊事件由touchstart、touchend組成,touchend後觸發tap事件。

程式設計客棧w>

mytouchstart: function(e),mytouchend: function(e),mytap: function(e)

2.雙擊

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

3.長按

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

mytouchstart: function(e),//長按事件mylongtap: function(e),mytouchend: function(e),mytap: function(e)

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

事件觸發順序

單擊touchstart → touchend → tap

雙擊touchstart → touchend → tap → touchstart → touchend → tap

長按touchstart → longtap → touchend → tap

4.滑動

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

座標圖：

以上沒考慮r為1的情況。

5.多點觸控

由於模擬器尚不支援多點觸控，內測開放後，繼續補充。

本文標題: 微信小程式 觸控事件詳細介紹

本文位址:

微信小程式 wx key詳細介紹

個人感覺官方給出的例 子不是很明確，官方解釋如下 wx key 如果列表中專案的位置會動態改變或者有新的專案新增到列表中，並且希望列表中的專案保持自己的特徵和狀態 如 中的輸入內容，的選中狀態 需要使用 wx key 來指定列表中專案的唯一的識別符號。wx key 的值以兩種形式提供 字串，代表在 ...

微信小程式 事件

事件繫結 事件繫結的寫法同元件的屬性，以 key value 的形式。key 以bind或catch開頭，然後跟上事件的型別，如bindtap,catchtouchstart value 是乙個字串，需要在對應的 page 中定義同名的函式。不然當觸發事件的時候會報錯。bind事件繫結不會阻止冒泡事...

微信小程式 閉包寫法詳細介紹

微信小程式 閉包寫法 在入口處的 app.js 中定義了乙個獲取使用者 openid 的函式，在微信的登入介面 wx.login 中發起網路請求。這個函式傳入乙個 函式 cb getopeniddata function cb success function res fail function 在...