uni-app之頁面生命周期

說明

uni-app 支持如下頁面生命周期函數：

函數名	說明	平台差異	最低版本
onInit	監聽頁面初始化，其參數同 onLoad 參數，為上個頁面傳遞的數據，參數類型為 Object（用於頁面傳參），觸發時機早於 onLoad	百度小程序	3.1.0+
onLoad	監聽頁面加載，其參數為上個頁面傳遞的數據，參數類型為 Object（用於頁面傳參），參考示例
onShow	監聽頁面顯示。頁面每次出現在屏幕上都觸發，包括從下級頁面點返回露出當前頁面
onReady	監聽頁面初次渲染完成。注意如果渲染速度快，會在頁面進入動畫完成前觸發
onHide	監聽頁面隱藏
onUnload	監聽頁面卸載
onResize	監聽窗口尺寸變化	App、微信小程序
onPullDownRefresh	監聽用戶下拉動作，一般用於下拉刷新，參考示例
onReachBottom	頁面滾動到底部的事件（不是scroll-view滾到底），常用於下拉下一頁數據。具體見下方注意事項
onTabItemTap	點擊 tab 時觸發，參數為Object，具體見下方注意事項	微信小程序、QQ小程序、支付寶小程序、百度小程序、H5、App（自定義組件模式）
onShareAppMessage	用戶點擊右上角分享	微信小程序、QQ小程序、支付寶小程序、字節小程序
onPageScroll	監聽頁面滾動，參數為Object	nvue暫不支持
onBackPress	監聽頁面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示來源是左上角返回按鈕或 android 返回鍵；navigateBack表示來源是 uni.navigateBack ；詳細說明及使用：onBackPress 詳解。支付寶小程序只有真機能觸發，只能監聽非navigateBack引起的返回，不可阻止默認行為。	app、H5、支付寶小程序
onNavigationBarSearchInputChanged	監聽原生標題欄搜索輸入框輸入內容變化事件	App、H5	1.6.0
onNavigationBarSearchInputConfirmed	監聽原生標題欄搜索輸入框搜索事件，用戶點擊軟鍵盤上的“搜索”按鈕時觸發。	App、H5	1.6.0
onNavigationBarSearchInputClicked	監聽原生標題欄搜索輸入框點擊事件	App、H5	1.6.0
onShareTimeline	監聽用戶點擊右上角轉發到朋友圈	微信小程序	2.8.1+
onAddToFavorites	監聽用戶點擊右上角收藏	微信小程序	2.8.1+

 OnInt

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

onReachBottom

• 使用注意 可在pages.json里定義具體頁面底部的觸發距離onReachBottomDistance，比如設為50，那么滾動頁面到距離底部50px時，就會觸發onReachBottom事件。
• 如使用scroll-view導致頁面沒有滾動，則觸底事件不會被觸發。scroll-view滾動到底部的事件請參考scroll-view的文檔。

onPageScroll

（監聽滾動、滾動監聽、滾動事件）參數說明：

屬性	類型	說明
scrollTop	Number	頁面在垂直方向已滾動的距離（單位px）

注意：

• 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對象如下：

屬性	類型	說明
index	String	被點擊tabItem的序號，從0開始
pagePath	String	被點擊tabItem的頁面路徑
text	String	被點擊tabItem的按鈕文字

注：

• 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

參數說明如下：

屬性	類型	說明
index	Number	原生標題欄按鈕屬豬的下標

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

 onBackPress

回調函數對象說明：

屬性	類型	說明
from	String	觸發返回行為的來源：'backbutton'——左上角導航欄按鈕及安卓返回鍵；'navigateBack'——uni.navigateBack() 方法。支付寶小程序端不支持返回此字段

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

注意：

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

參考網址

https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f