深入淺析uni-app的生命週期

推薦：《》

應用生命週期

uni-app 支援如下應用生命週期函數：

注意

• 應用生命週期僅可在App.vue中監聽，在其它頁面監聽無效。
• onlaunch裡進行頁面跳轉，如遇白屏報錯，請參考onlaunch生命週期內navigateto跳轉頁面注意 - DCloud問答
• onPageNotFound 頁面實際上已經開啟了（比如通過分享卡片、小程式碼）且發現頁面不存在，才會觸發，api 跳轉不存在的頁面不會觸發（如 uni.navigateTo）

頁面生命週期

uni-app 支援如下頁面生命週期函數：

onInit使用注意

• 僅百度小程式基礎庫 3.260 以上支援 onInit 生命週期
• 其他版本或平臺可以同時使用 onLoad 生命週期進行相容，注意避免重複執行相同邏輯
• 不依賴頁面傳參的邏輯可以直接使用 created 生命週期替代

onReachBottom使用注意 可在pages.json裡定義具體頁面底部的觸發距離onReachBottomDistance，比如設為50，那麼捲動頁面到距離底部50px時，就會觸發onReachBottom事件。

如使用scroll-view導致頁面沒有捲動，則觸底事件不會被觸發。scroll-view捲動到底部的事件請參考scroll-view的檔案

onPageScroll （監聽捲動、捲動監聽、捲動事件）引數說明：

注意

• onPageScroll裡不要寫互動複雜的js，比如頻繁修改頁面。因為這個生命週期是在渲染層觸發的，在非h5端，js是在邏輯層執行的，兩層之間通訊是有損耗的。如果在捲動過程中，頻發觸發兩層之間的資料交換，可能會造成卡頓。
• 如果想實現捲動時標題列透明漸變，在App和H5下，可在pages.json中設定titleNView下的type為transparent，參考。
• 如果需要捲動吸頂固定某些元素，推薦使用css的粘性佈局，參考外掛市場。外掛市場也有其他js實現的吸頂外掛，但效能不佳，需要時可自行搜尋。
• 在App、微信小程式、H5中，也可以使用wxs監聽捲動，參考；在app-nvue中，可以使用bindingx監聽捲動，參考。
• onBackPress上不可使用async，會導致無法阻止預設返回

onPageScroll : function(e) { //nvue暫不支援捲動監聽，可用bindingx代替
    console.log("捲動距離為：" + e.scrollTop);
},

onTabItemTap 返回的json物件說明：

注意

• onTabItemTap常用於點選當前tabitem，捲動或重新整理當前頁面。如果是點選不同的tabitem，一定會觸發頁面切換。
• 如果想在App端實現點選某個tabitem不跳轉頁面，不能使用onTabItemTap，可以使用plus.nativeObj.view放一個區塊蓋住原先的tabitem，並攔截點選事件。
• 支付寶小程式平臺onTabItemTap表現為點選非當前tabitem後觸發，因此不能用於實現點選返回頂部這種操作

onTabItemTap : function(e) {
    console.log(e);
    // e的返回格式為json物件： {"index":0,"text":"首頁","pagePath":"pages/index/index"}
},

onNavigationBarButtonTap 引數說明：

onNavigationBarButtonTap : function (e) {
    console.log(e);
    // e的返回格式為json物件：{"text":"測試","index":0}
}

onBackPress 回撥引數物件說明：

export default {
    data() {
        return {};
    },
    onBackPress(options) {
        console.log('from:' + options.from)
    }
}

注意

• nvue 頁面weex編譯模式支援的生命週期同weex，具體參考：weex生命週期介紹。
• 支付寶小程式真機可以監聽到非navigateBack引發的返回事件（使用小程式開發工具時不會觸發onBackPress），不可以阻止預設返回行為

元件生命週期

uni-app 元件支援的生命週期，與vue標準元件的生命週期相同。這裡沒有頁面級的onLoad等生命週期：

推薦：《》

以上就是深入淺析uni-app的生命週期的詳細內容，更多請關注TW511.COM其它相關文章！