事件是用來打通邏輯層與檢視層的樞紐,我們一般在檢視層(wxml檔案)對某個控制項繫結事件函式,在邏輯層(js檔案)編寫事件函式**。
4.1 事件型別
小程式中有兩類事件
1、冒泡事件:當乙個元件的事件被觸發時,該事件會向父節點傳遞資料。
2、非冒泡事件:當乙個元件上的事件被觸發時,該事件不會向父節點傳輸資料。
4.2 事件繫結
事件的繫結比較簡單,在檢視層中增加類似如下**,事件通常有兩種開頭,一種時bind以他開頭代表普通模式;另一種是catch開頭,他會阻止冒泡事件冒泡。初期只需要用bind模式即可
click me
上述**中bindtap代表點選事件,他所觸發的函式為viewtap,所以我們在邏輯層編寫viewtap函式即可。
如下所示:
page(})
定義乙個函式viewtap,入口引數為e,此物件會攜帶一些資料,可以供我們操作使用。
4.3 事件物件
函式viewtap,入口引數為e,此物件會攜帶一些資料,可以供我們操作使用。
1、type事件型別
e.type 事件型別,tap型別或者其他型別
2、timestamp觸發時間
3、target觸發源
e.target.id 得到觸發源元件的id
e.target.offsetleft 元件座標的偏移量
e.target.offsettop 元件座標的偏移量
e.target.dataset.org 獲取data開頭的資料,在控制項中我們可以定義data開頭的變數引數
例如
如上**檢視層定義了data-org引數,則可以在邏輯層通過e.target.dataset.org獲取其值。
4、detail
detail會對應一些表單輸入
5、touch屬性
pagex pagey文件觸控點偏移量
screenx screeny 螢幕偏移量
4.4 常見事件
事件解釋
tap手指觸控後馬上離開,相當於點選一下
longpress
手指觸控後,超過350ms再離開,如果指定了事件**函式並觸發了這個事件,tap事件將不被觸發
touchstart
手指觸控動作開始
touchmove
手指觸控後移動
touchcancel
手指觸控動作被打斷,如來電提醒,彈窗
在一些特殊控制項也有自己特殊的事件
1、input
事件解釋
bindinput
鍵盤輸入時觸發,event.detail = ,keycode 為鍵值,2.1.0 起支援,處理函式可以直接 return 乙個字串,將替換輸入框的內容。
bindfocus
輸入框聚焦時觸發,event.detail = ,height 為鍵盤高度,在基礎庫 1.9.90 起支援
bindblur
輸入框失去焦點時觸發,event.detail =
bindconfirm
點選完成按鈕時觸發,event.detail =
2、checkbox核取方塊
屬性名型別
預設值說明
bindchange
eventhandle
中選中項發生改變是觸發 change 事件,detail =
微信小程式學習Course 9 雲開發功能
雲開發為開發者提供完整的雲端支援,弱化後端和運維概念,無需搭建伺服器,使用平台提供的 api 進行核心業務開發,即可實現快速上線和迭代,同時這一能力,同開發者已經使用的雲服務相互相容,並不互斥。目前提供三大基礎能力支援 資料庫 乙個既可在小程式前端操作,也能在雲函式中讀寫的 json 資料庫 9.1...
微信小程式學習Course 7 定時器功能
設定乙個定時器,在定時到期以後執行註冊的 函式,值得注意的是本函式只執行一次!settimeout this.daojishi,1000 時間到達一秒執行一次daojishi函式如果我們想實現乙個不停呼叫的函式,怎末實現呢?以下函式利用遞迴實現了乙個倒計時功能,每隔一秒更新以下倒計時時間。onloa...
微信小程式學習
在實際開發過程中遇到 warning now you can provide attr wx key for a wx for to improve performance.上網查詢資料與檢視官方文件發現原因大致如下 官方解釋 wx key 如果列表中專案的位置會動態改變或者有新的專案新增到列表中,...