微信小程序 頁面跳轉事件綁定的實例詳解

什么是事件

事件是視圖層到邏輯層的通訊方式。 事件可以將用戶的行為反饋到邏輯層進行處理。 事件可以綁定在組件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。 事件對象可以攜帶額外信息，如 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事件，(詳見各個組件官方文檔)

如有疑問請留言或者到本站社區交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！