uni-app 生命周期

生命周期

應(yīng)用生命周期

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

注意

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

示例代碼

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

頁(yè)面生命周期

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

onInit使用注意

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

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

如使用 scroll-view 導(dǎo)致頁(yè)面沒有滾動(dòng)，則觸底事件不會(huì)被觸發(fā)。scroll-view 滾動(dòng)到底部的事件請(qǐng)參考 scroll-view 的文檔

onPageScroll 參數(shù)說明：

注意

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

onTabItemTap 參數(shù)說明：

注意

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

  
  

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

onNavigationBarButtonTap 參數(shù)說明：

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

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

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

注意

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

組件生命周期

uni-app 組件支持的生命周期，與 vue 標(biāo)準(zhǔn)組件的生命周期相同。這里沒有頁(yè)面級(jí)的 onLoad 等生命周期：