uni-app 生命周期

生命周期

應(yīng)用生命周期

uni-app 支持如下應(yīng)用生命周期函數(shù)：

注意

• 應(yīng)用生命周期僅可在 App.vue 中監(jiān)聽，在其他頁面監(jiān)聽無效。
• onlaunch 里進行頁面調(diào)整，如遇白屏報錯，請參考 https://ask.dcloud.net.cn/article/35942

示例代碼

<script>
    // 只能在App.vue里監(jiān)聽應(yīng)用的生命周期
    export default {
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

頁面生命周期

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

onInit使用注意

• 僅百度小程序基礎(chǔ)庫 3.260 以上支持 onInit 生命周期
• 其他版本或平臺可以同時使用 onLoad 生命周期進行兼容，注意避免重復執(zhí)行相同邏輯
• 不依賴頁面?zhèn)鲄⒌倪壿嬁梢灾苯邮褂?created 生命周期替代

onReachBottom 使用注意 可在 pages.json 里定義具體頁面底部的觸發(fā)距離 onReachBottomDistance，比如設(shè)為 50，那么滾動頁面到距離底部 50px 時，就會觸發(fā) onReachBottom 事件。

如使用 scroll-view 導致頁面沒有滾動，則觸底事件不會被觸發(fā)。scroll-view 滾動到底部的事件請參考 scroll-view 的文檔

onPageScroll 參數(shù)說明：

注意

• onPageScroll 里不要寫交互復雜的 js，比如頻繁修改頁面。因為這個生命周期是在渲染層觸發(fā)的，在非 h5 端，js是在邏輯層執(zhí)行的，兩層之間通信是有損耗的。如果在滾動過程中，頻發(fā)觸發(fā)兩層之間的數(shù)據(jù)交換，可能會造成卡頓。
• 如果想實現(xiàn)滾動時標題欄透明漸變，在 App 和 H5 下，可在 pages.json 中配置 titleNView 下的 type 為 transparent，參考。
• 如果需要滾動吸頂固定某些元素，推薦使用 css 的粘性布局，參考插件市場。插件市場也有其他 js 實現(xiàn)的吸頂插件，但性能不佳，需要時可自行搜索。
• 在 App、微信小程序、H5 中，也可以使用 wxs 監(jiān)聽滾動，參考；在 app-nvue 中，可以使用 bindingx 監(jiān)聽滾動，參考。
• onBackPress 上不可使用 async，會導致無法阻止默認返回

onTabItemTap 參數(shù)說明：

注意

• onTabItemTap 常用于單擊當前 tabitem，滾動或刷新當前頁面。如果是單擊不同的 tabitem，一定會觸發(fā)頁面切換。
• 如果想在 App 端實現(xiàn)點擊某個 Tabitem，則不能使用 onTabItemTap，可以使用 plus.nativeObj.view 放一個區(qū)塊蓋住原先的 TAbitem，并攔截點擊事件。
• 支付寶小程序平臺 onTabltemTap 表現(xiàn)為點擊非當前 tabitem 后觸發(fā)，因此不能用于實現(xiàn)點擊返回頂部這種操作。

  
  

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

onNavigationBarButtonTap 參數(shù)說明：

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

onBackPress 某些參數(shù)對象說明：

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

注意

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

組件生命周期

uni-app 組件支持的生命周期，與 vue 標準組件的生命周期相同。這里沒有頁面級的 onLoad 等生命周期：