在前端網頁中我們需要觸發(fā)一個事件如果按鈕點擊后調用函數,文本、圖片、鏈接被點擊后調用一個函數一個事件,我們都知道用click,可是微信小程序中的click是不存在的,他怎么才能和網頁中一樣的使用click的呢?
1.bindtap語法的使用
這時候有人肯定會問,我不是來學習click的怎么教我bindtap語法使用了?
其實不然,bindtap是微信小程序中的onclick鼠標點擊事件
在小程序中,不存在HTMLZ中的onclick鼠標點擊事件,而是通過tap事件來響應用戶的觸摸行為。
①通過bindtap,可以為組件綁定tap觸摸事件,語法如下:
<button type="primary" bindtap="onclick">按鈕</button>
?②在頁面的.js文件中定義對應的事件處理函數,事件參數通過形參event(一般簡寫成e)來接收:
Page({
onclick(e){
console.log(e)
}
})
我們嘗試需要點擊按鈕輸出e里面是啥
我們會看多很多參數,這時候不用怕,我給大家講解一些常用的。
屬性 | 類型 | 說明 | 基礎庫版本 |
---|---|---|---|
type | String | 事件類型 | |
timeStamp | Integer | 事件生成時的時間戳 | |
target | Object | 觸發(fā)事件的組件的一些屬性值集合 | |
currentTarget | Object | 當前組件的一些屬性值集合 | |
touches | Array | 觸摸事件,當前停留在屏幕中的觸摸點信息的數組 | |
changedTouches | Array | 觸摸事件,當前變化的觸摸點信息的數組 |
?2.1.type屬性
我們從圖書看出在bindtap事件中他返回的是tap,其實我們事件有很多種
?以上三種是我們最常見的,是否還有其他屬性我們可以前往微信小程序幫助文檔進行查看
2.2.timeStamp屬性
這個屬性就是代表我們WXML頁面從打開后開始計時,到事件被觸發(fā)為止顯示的一個時間戳
單位時毫秒
?2.3 target屬性
target屬性是我們最長用到的屬性,所以我給他標紅了,
看圖明白一個大概,后面實戰(zhàn)種使用到我們會詳細講解,現(xiàn)在都做一個了解
2.4??currentTarget屬性
? currentTarget屬性和target屬性其實是一樣的,但是他有一個小小的區(qū)別
看圖我們是不是以為?他們2個沒有區(qū)別數據都是一樣的,其實currenttarget屬性是指向當前組件的父組件,
我們會在后面推文種寫出他兩的本質區(qū)別,可以進入主頁進行查看文章文章來源:http://www.zghlxwxcb.cn/news/detail-792069.html
2.5 touches和changedtouches屬性
其實他們兩個屬性也是一樣的道理,一句話概括他們, 當用戶進行多個手指觸摸屏幕會留下痕跡,被這兩個屬性記錄,然后返回給后臺。文章來源地址http://www.zghlxwxcb.cn/news/detail-792069.html
到了這里,關于微信小程序 button按鈕怎么觸發(fā)事件? bindtap語法怎么使用?的文章就介紹完了。如果您還想了解更多內容,請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網!