微信小程序 頁面跳轉(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ū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
您可能感興趣的文章:
- 微信小程序 頁面跳轉(zhuǎn)傳參詳解
- 微信小程序 頁面跳轉(zhuǎn)和數(shù)據(jù)傳遞實(shí)例詳解
- 微信小程序 詳解頁面跳轉(zhuǎn)與返回并回傳數(shù)據(jù)
- 微信小程序?qū)崿F(xiàn)點(diǎn)擊文字頁面跳轉(zhuǎn)功能【附源碼下載】
- 微信小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)傳值以及獲取值的方法分析
- 微信小程序 頁面跳轉(zhuǎn)傳遞值幾種方法詳解
- 詳解微信小程序 頁面跳轉(zhuǎn) 傳遞參數(shù)
- 微信小程序 頁面跳轉(zhuǎn)如何實(shí)現(xiàn)傳值
- 微信小程序常見頁面跳轉(zhuǎn)操作簡單示例
- 微信小程序之五種頁面跳轉(zhuǎn)方法小結(jié)
相關(guān)文章
微信小程序 實(shí)戰(zhàn)實(shí)例開發(fā)流程詳細(xì)介紹
這篇文章主要介紹了微信小程序 實(shí)戰(zhàn)實(shí)例開發(fā)流程詳細(xì)介紹的相關(guān)資料,這里主要介紹微信小程序的開發(fā)流程和簡單實(shí)例，需要的朋友可以參考下2017-01-01
這篇文章主要介紹了微信小程序 loading（加載中提示框）實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要為大家介紹了JS前端中的設(shè)計模式和使用場景示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了JS微前端MicroApp基礎(chǔ)使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了Three.js材質(zhì)Material類型示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
本文主要介紹Google 地圖API Key,開發(fā)Google 地圖應(yīng)用的朋友都知道,在開發(fā)的前需要免費(fèi)的Google 地圖API Key,這里詳細(xì)給出獲得API Key的流程,有需要的小伙伴參考下2016-08-08
這篇文章主要給大家分享了5個JS高階函數(shù)，在JavaScript中，函數(shù)實(shí)際上也是一個數(shù)據(jù)，也就是說函數(shù)也可以賦值給一個變量。本篇文章就來介紹一些JavaScript中的高階函數(shù)的用法，具有一定的參考價值,需要的朋友可以參考一下2021-12-12
這篇文章主要為大家介紹了threejs中使用drawbufferss示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
微信小程序本作用域下調(diào)用全局JS詳解及實(shí)例
這篇文章主要介紹了微信小程序本作用域下調(diào)用全局JS詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-02-02
fetch-event-source庫使用源碼學(xué)習(xí)
這篇文章主要為大家介紹了fetch-event-source庫源碼學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09