微信小程式學習Course 4 事件

2022-07-20 15:36:16 字數 2071 閱讀 1820

事件是用來打通邏輯層與檢視層的樞紐,我們一般在檢視層(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 如果列表中專案的位置會動態改變或者有新的專案新增到列表中,...