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

本文主要和大家介紹微信小程式頁面跳轉事件綁定的實例詳解的相關資料,希望透過本文大家能夠理解並應用小程式頁面跳轉及事件綁定的實例，需要的朋友可以參考下，希望能幫助大家。

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

什麼是事件

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

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

3. 事件可以綁定在元件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。

4. 事件物件可以攜帶額外訊息，如 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再离开

註：除上表之外的其他元件自訂事件如無特殊申明都是非冒泡事件，如

的submit事件，的input事件，的scroll事件，(詳見各個組件官方文檔)

#相關推薦：

html怎麼實作頁面跳轉時傳遞參數

#Router解決跨模組下的頁面跳轉

vue實作登入後頁面跳到之前頁面實例分享

#

以上是微信小程式頁面跳轉事件綁定實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！