微信小程序中頁面跳轉(zhuǎn)事件綁定的示例分析

這篇文章給大家分享的是有關(guān)微信小程序中頁面跳轉(zhuǎn)事件綁定的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

微信小程序 頁面跳轉(zhuǎn)事件綁定的實例詳解

什么是事件

1. 事件是視圖層到邏輯層的通訊方式。

2. 事件可以將用戶的行為反饋到邏輯層進行處理。

3. 事件可以綁定在組件上，當達到觸發(fā)事件，就會執(zhí)行邏輯層中對應(yīng)的事件處理函數(shù)。

4. 事件對象可以攜帶額外信息，如 id, dataset, touches。
   

在組件中綁定一個事件處理函數(shù)。

如bindtap，當用戶點擊該組件的時候會在該頁面對應(yīng)的Page中找到相應(yīng)的事件處理函數(shù)

 <view bindtap="view">
    <text bindtap="toast" class="journey">開啟小程序之旅   </text>
 </view>

子元素觸發(fā)父級元素也會觸發(fā)若要只觸發(fā)子元素使用catchtap代替bindtap

在相應(yīng)的Page定義中寫上相應(yīng)的事件處理函數(shù)，參數(shù)是event。

Page({
 toast: function (event) {
  // wx.navigateTo({
  //  url: '../redirect/redirect'
  // });


  wx.redirectTo({
   url: '../redirect/redirect',
  });
  // view:function(event){
  //  // 父級元素
  // }

 },
 /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏/并未關(guān)閉返回
   */
 onHide: function (event) {
   console.log(event)
 },

 /**
  * 生命周期函數(shù)--監(jiān)聽頁面卸載/
  */
 onUnload: function () {
  console.log(222)
 },
})

事件分類

冒泡事件：當一個組件上的事件被觸發(fā)后，該事件會向父節(jié)點傳遞。

非冒泡事件：當一個組件上的事件被觸發(fā)后，該事件不會向父節(jié)點傳遞。

WXML的冒泡事件列表：

類型 觸發(fā)條件
touchstart 手指觸摸動作開始
touchmove  手指觸摸后移動
touchcancel 手指觸摸動作被打斷，如來電提醒，彈窗
touchend  手指觸摸動作結(jié)束
tap 手指觸摸后馬上離開
longtap 手指觸摸后，超過350ms再離開

注：除上表之外的其他組件自定義事件如無特殊申明都是非冒泡事件，如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件，(詳見各個組件官方文檔)

感謝各位的閱讀！關(guān)于“微信小程序中頁面跳轉(zhuǎn)事件綁定的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！