小程序模板網(wǎng)

程序員開發(fā)實戰(zhàn)系列《五》視圖層WXML:事件

發(fā)布時間:2018-03-30 15:38 所屬欄目:小程序開發(fā)教程
本文來自公眾號: 程序員實戰(zhàn)

上篇文章講解了數(shù)據(jù)綁定、模板、邏輯等,主要的作用是在視圖中展示數(shù)據(jù),以及如何展示。但是只有展示是不夠的,我們需要互動。比如一個HTML頁面,可以展示文字、圖片,但是還要有一些互動,比如鏈接、按鈕等。

 

互動其實就是事件了。比如HTML中 button 的 onClick ,就是點擊的時候,觸發(fā)的動作以及開發(fā)人員相應的業(yè)務邏輯處理。

 

一、事件小例:bindtap

事件是視圖層到邏輯層的通訊方式。將用戶的行為反饋到邏輯層進行處理。一般是綁定在組件上,觸發(fā)時執(zhí)行處理函數(shù),并可以攜帶參數(shù)。

 

做一個按鈕,實現(xiàn)頁面跳轉。

index.wxml:


	
  1. <button bindtap="toEvent">視圖層WXML:事件</button>

index.js:


	
  1. toEvent : function(){
  2. // 跳轉到 event.wxml頁面
  3. wx.navigateTo({
  4. url: '/pages/wxml/event'
  5. })
  6. }
  7.  

 

效果動圖

 

二、事件分類:冒泡、非冒泡 冒泡事件:

    當一個組件上的事件被觸發(fā)后,該事件會向父節(jié)點傳遞。 非冒泡事件:

    當一個組件上的事件被觸發(fā)后,該事件不會向父節(jié)點傳遞。

 

以下為冒泡事件,其他組件事件無特殊申明都是非冒泡事件

類型     觸發(fā)事件
touchstart     手指觸摸動作開始
touchmove  手指觸摸后移動
touchcancel 手指觸摸動作被打斷,如來電提醒,彈窗
touchend     手指觸摸動作結束
tap                手指觸摸后馬上離開
longtap         手指觸摸后,超過350ms再離開

比如:

事件以bind或者catch開頭

bind事件綁定不會阻止冒泡事件向上冒泡,如bindtap。

catch事件綁定可以阻止冒泡事件向上冒泡,如catchtap。

 

因為handleTap2是catchtap,所以:

點擊 inner view,會先后觸發(fā) handleTap3、handleTap2

點擊 middle view,只會觸發(fā) handleTap2

點擊 outer view,會觸發(fā) handleTap1

 

在調試日志中查看

可以看到事件執(zhí)行的日志 和 事件對象。

 

三、事件對象

如無特殊說明,當組件觸發(fā)事件時,邏輯層綁定該事件的處理函數(shù)會收到一個事件對象。(見上圖,事件對象)

BaseEvent
type                String      事件類型
timeStamp     Integer  事件生成時的時間戳
target              Object    觸發(fā)事件的組件的一些屬性值集合
currentTarget Object      當前組件的一些屬性值集合
CustomEvent自定義事件(繼承BaseEvent)
detail     Object 額外的信息
TouchEvent觸摸事件(繼承BaseEvent)
touches                 Array 當前停留在屏幕中的觸摸點信息的數(shù)組
changedTouches Array 當前變化的觸摸點信息的數(shù)組

事件詳細介紹請參考官方文檔。

 

target 和 currentTarget

target 和 currentTarget 可以參考上例中,點擊 inner view 時,handleTap3 收到的事件對象 target 和 currentTarget 都是 inner,而 handleTap2 收到的事件對象 target 就是 inner,currentTarget 就是 middle。

 

target 和 currentTarget 中的 dataset屬性 在組件中可以定義數(shù)據(jù),這些數(shù)據(jù)將會通過事件傳遞給 SERVICE。

書寫方式: 以data-開頭,多個單詞由連字符-鏈接,所有的大寫會自動轉成小寫,連字符轉成駝峰

比如:

data-alpha-beta="1" data-alphaBeta="2" >

 

touches是 Touch 對象的數(shù)組

請參考接口文檔



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/22972.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢