uni-app 生命周期

生命周期

应用生命周期

uni-app 支持如下应用生命周期函数:

函数名说明
onLaunchuni-app初始化完成时触发(局部只触发一次)
展出uni-app启动,或从后台进入前台显示
隐藏uni-app从前台进入后台
onErroruni-app报错时触发
onUniNViewMessagenvue页面发送的数据进行监听,可参考nvue向vue通讯

注意

  • 应用生命周期仅可在App.vue中监听,在其他页面监听无效。
  • onlaunch里进行页面调整,如遇白屏报错,请参考https://ask.dcloud.net.cn/article/35942

页面生命周期

uni-app 支持如下页面生命周期函数:

函数名说明平台差异说明最低版本
负载监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参),参考示例
展出监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回进入当前页面
onReady监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发
隐藏监听页面隐藏
onUnload监听页面卸载
onResize监听窗口尺寸变化App,微信小程序
onPullDownRefresh监听用户拖动动作,一般用于拖动刷新,参考示例
onReachBottom页面上拉触底事件的处理函数
onTabItemTap单击选项卡时触发,参数为对象,具体见以下注意事项微信小程序,百度小程序,H5,App(自定义组件模式)
onShareAppMessage用户点击右上角分享微信小程序,百度小程序,字节跳动小程序,支付宝小程序
onPageScroll监听页面滚动,参数为对象
onNavigationBarButtonTap监听原生标题栏按钮点击事件,参数为对象5+ App,H5
onBackPress监听页面返回,返回事件= {from:backbutton,navigationBack},backbutton表示来源是左上角返回按钮或android返回键; navigateBack表示来源是uni.navigateBack;详细说明及使用:onBackPress详解App,H5
onNavigationBarSearchInputChanged监听原生标题栏搜索输入框输入内容变化事件App,H51.6.0
onNavigationBarSearchInputConfirmed监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。App,H51.6.0
onNavigationBarSearchInputClicked监听原生标题栏搜索输入框点击事件App,H51.6.0

onPageScroll 参数说明:

属性类型说明
scrollTop页面在垂直方向已滚动的距离(单位px)

onTabItemTap 参数说明:

属性类型说明
指数被点击tabItem的序号,从0开始
pagePath被点击tabItem的页面路径
文本被点击tabItem的按钮文字

注意

  • onTabItemTap常用于单击当前tabitem,滚动或刷新当前页面。如果是单击不同的tabitem,一定会触发页面切换。
  • 如果想在App端实现点击某个Tabitem,则不能使用onTabItemTap,可以使用plus.nativeObj.view放一个区块盖住原先的TAbitem,并拦截点击事件。
  • onTabItemTap在App端,从HBuilderX 1.9的自定义组件编译模式开始支持。

onNavigationBarButtonTap 参数说明:

属性类型说明
指数原生标题栏按钮方块的下标

onBackPress 某些参数对象说明:

属性类型说明
触发返回行为的来源:'backbutton'-左上角导航栏按钮和安卓返回键;'navigateBack'-uni.navigateBack()方法。
export default {
    data() {
        return {};
    },
    onBackPress(options) {
        console.log('from:' + options.from)
    }
}

注意

  • nvue页面支持的生命周期参考:nvue生命周期介绍。


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部