微信小程式頁面跳轉事件繫結/冒泡,非冒泡事件
阿新 • • 發佈:2019-02-16
什麼是事件
事件是檢視層到邏輯層的通訊方式。
事件可以將使用者的行為反饋到邏輯層進行處理。
事件可以繫結在元件上,當達到觸發事件,就會執行邏輯層中對應的事件處理函式。
事件物件可以攜帶額外資訊,如 id, dataset, touches。
- 在元件中繫結一個事件處理函式。
如bindtap,當用戶點選該元件的時候會在該頁面對應的Page中找到相應的事件處理函式
<view bindtap="view">
<text bindtap="toast" class="journey">開啟小程式之旅 </text >
</view>
子元素觸發父級元素也會觸發若要只觸發子元素使用catchtap代替bindtap
在相應的Page定義中寫上相應的事件處理函式,引數是event。
Page({
toast: function (event) {
// wx.navigateTo({
// url: '../redirect/redirect'
// });
wx.redirectTo({
url: '../redirect/redirect',
});
// view:function(event){
// // 父級元素
// }
},
/**
* 生命週期函式--監聽頁面隱藏/並未關閉返回
*/
onHide: function (event) {
console.log(event)
},
/**
* 生命週期函式--監聽頁面解除安裝/
*/
onUnload: function () {
console.log(222)
},
})
事件分類
冒泡事件:當一個元件上的事件被觸發後,該事件會向父節點傳遞。
非冒泡事件:當一個元件上的事件被觸發後,該事件不會向父節點傳遞。
- WXML的冒泡事件列表:
型別 觸發條件 touchstart 手指觸控動作開始 touchmove 手指觸控後移動 touchcancel 手指觸控動作被打斷,如來電提醒,彈窗 touchend 手指觸控動作結束 tap 手指觸控後馬上離開 longtap 手指觸控後,超過350ms再離開
注:除上表之外的其他元件自定義事件如無特殊申明都是非冒泡事件,如<form/>的submit事件,<input/>的input事件,<scroll-view/>的scroll事件,(詳見各個元件官方文件)
所謂的光輝歲月,並不是後來,閃耀的日子,而是無人問津時,你對夢想的偏執。