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

注意

• 應用生命週期僅可在App.vue中監聽，在其它頁面監聽無效。
• onlaunch裡進行頁面跳轉，如遇白屏報錯，請參考https://ask.dcloud.net.cn/article/35942

示例程式碼

<script>
    // 只能在App.vue裡監聽應用的生命週期
    export default {
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log(
 
'App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

頁面生命週期

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

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等生命週期：