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

更新時間：2017年09月20日 16:11:46 投稿：lqh

這篇文章主要介紹了微信小程序頁面跳轉(zhuǎn)事件綁定的實(shí)例詳解的相關(guān)資料,希望通過本文大家能夠理解并應(yīng)用小程序頁面跳轉(zhuǎn)及事件綁定的實(shí)例，需要的朋友可以參考下

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

什么是事件

事件是視圖層到邏輯層的通訊方式。
事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。
事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會執(zhí)行邏輯層中對應(yīng)的事件處理函數(shù)。
事件對象可以攜帶額外信息，如 id, dataset, touches。

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

如bindtap，當(dāng)用戶點(diǎn)擊該組件的時候會在該頁面對應(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)
 },
})

事件分類

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

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

WXML的冒泡事件列表：

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

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

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

您可能感興趣的文章:

相關(guān)文章

Web Worker線程解決方案electron踩坑記錄
這篇文章主要為大家介紹了Web Worker線程解決方案electron踩坑記錄，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
微信小程序頁面?zhèn)鲄?shí)例詳解
這篇文章主要介紹了微信小程序頁面?zhèn)鲄?shí)例詳解的相關(guān)資料,這里對頁面跳轉(zhuǎn)及傳遞參數(shù)的功能做個小示例，幫助大家盡快上手，很簡單，需要的朋友可以參考下
2016-11-11
webpack安裝配置及使用教程詳解
這篇文章主要為大家介紹了webpack的安裝配置及使用的教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-06-06
JS開發(fā)前端團(tuán)隊展示控制器來為成員引流
這篇文章主要為大家介紹了JS開發(fā)前端團(tuán)隊展示控制器實(shí)現(xiàn)為成員引流示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
利用前端HTML+CSS+JS開發(fā)簡單的TODOLIST功能（記事本）
這篇文章主要介紹了用HTML+CSS+JS做出簡單的TODOLIST（記事本）項目,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友可以參考下
2021-04-04
微信小程序（應(yīng)用號）開發(fā)新聞客戶端實(shí)例
這篇文章主要介紹了微信小程序（應(yīng)用號）開發(fā)新聞客戶端實(shí)例的相關(guān)資料,需要的朋友可以參考下
2016-10-10
制作特殊字的腳本
制作特殊字的腳本...
2006-06-06
web?worker在項目中的使用學(xué)習(xí)為項目增加亮點(diǎn)
這篇文章主要為大家介紹了web?worker使用學(xué)習(xí)來為你的項目增加亮點(diǎn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
JS前端二維數(shù)組生成樹形結(jié)構(gòu)示例詳解
這篇文章主要為大家介紹了JS前端二維數(shù)組生成樹形結(jié)構(gòu)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
JSON stringify及parse方法實(shí)現(xiàn)數(shù)據(jù)深拷貝
這篇文章主要為大家介紹了JSON.stringify遞歸及JSON.parse有限狀態(tài)自動機(jī)實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08