深入理解 uni-app 页面生命周期(二):onReady()

简介: 深入理解 uni-app 页面生命周期(二):onReady()

当我们在uni-app中定义了onReady生命周期函数时,它将在页面初次渲染完成时触发。这个时机通常在onLoad之后,表示页面已经完成初次渲染,可以进行一些 DOM 操作或其他一次性的初始化工作。

下面是一个简单的示例,演示了如何使用onReady生命周期函数:

// 在页面的 page.js 文件中
 
export default {
  data() {
    return {
      message: 'Hello, onReady!',
    };
  },
  onLoad(options) {
    console.log('onLoad', options);
    // 在onLoad中可以获取到参数options
  },
  onReady() {
    console.log('onReady');
    // 在onReady中可以进行一次性的初始化工作,如DOM操作
    this.doSomeInitialization();
  },
  methods: {
    doSomeInitialization() {
      // 一次性的初始化工作,例如DOM操作
      console.log('Initialization complete');
    },
    // 其他方法
  },
  // 其他生命周期函数和配置项
};

在上述示例中,onReady生命周期函数被用来调用doSomeInitialization方法,这个方法可以包含一些需要在页面初次渲染完成后进行的初始化工作。

请注意,onReady生命周期函数的触发时机是在页面初次渲染完成时,如果有需要在每次页面显示时执行的操作,可以使用onShow生命周期函数。

相关文章
|
6天前
|
存储 移动开发 JavaScript
uni-app页面数据传参方式
uni-app页面数据传参方式
73 4
|
6天前
|
小程序
深入理解 uni-app 页面生命周期(四)onShareAppMessage
深入理解 uni-app 页面生命周期(四)onShareAppMessage
|
6天前
|
C++
深入理解 uni-app 页面生命周期(三):onHide vs onUnload
深入理解 uni-app 页面生命周期(三):onHide vs onUnload
|
6天前
|
监控 C++
深入理解 uni-app 页面生命周期(一):onLoad vs onShow
深入理解 uni-app 页面生命周期(一):onLoad vs onShow
115 0
|
6天前
|
JavaScript
uni-app新建页面
uni-app新建页面
|
6天前
uni-app 22发布朋友圈页面
uni-app 22发布朋友圈页面
20 0
uni-app 22发布朋友圈页面
|
6天前
|
前端开发
uni-app 4.14~4.23首页消息页面开发
uni-app 4.14~4.23首页消息页面开发
19 1
|
6天前
|
移动开发 小程序
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
|
6天前
|
API 数据安全/隐私保护 iOS开发
利用uni-app 开发的iOS app 发布到App Store全流程
利用uni-app 开发的iOS app 发布到App Store全流程
116 3
|
6天前
|
Android开发 开发者 UED
个人开发 App 成功上架手机应用市场的关键步骤
个人开发 App 成功上架手机应用市场的关键步骤