uniapp页面生命周期
时间: 2023-08-24 14:06:59 浏览: 168
UniApp 是一个基于 Vue.js 的跨平台应用开发框架,可以同时开发小程序、H5、App 等多个平台的应用。在 UniApp 中,页面的生命周期包括以下几个阶段:
1. beforeCreate:页面实例刚创建,数据绑定和事件还未初始化。
2. created:页面实例已创建,数据绑定已完成,但尚未挂载到 DOM 上。
3. beforeMount:页面即将挂载到 DOM 上。
4. mounted:页面已经挂载到 DOM 上,此时页面可见,可以进行 DOM 相关操作。
5. beforeUpdate:页面数据更新前的钩子函数。
6. updated:页面数据更新完成后的钩子函数。
7. activated(仅在 App 中可用):页面被激活时触发。
8. deactivated(仅在 App 中可用):页面被停用时触发。
9. beforeDestroy:页面销毁前的钩子函数。
10. destroyed:页面销毁后的钩子函数。
以上是 UniApp 页面的生命周期,在开发中可以利用这些生命周期函数来进行相关的操作和逻辑处理。
相关问题
uniapp 页面生命周期
UniApp的页面生命周期包括一系列的生命周期钩子函数,用于在页面的不同阶段执行相应的操作。以下是UniApp中常用的页面生命周期钩子函数:
1. onLoad:页面加载时触发,可以在此函数中进行一些初始化操作。
2. onShow:页面显示时触发,每次页面显示都会执行此函数,可以在此函数中进行数据刷新等操作。
3. onReady:页面初次渲染完成时触发,可以在此函数中进行一些视图操作。
4. onHide:页面隐藏时触发,可以在此函数中进行一些清理工作或保存数据等操作。
5. onUnload:页面卸载时触发,可以在此函数中进行一些清理工作或保存数据等操作。
6. onPullDownRefresh:下拉刷新时触发,可以在此函数中执行下拉刷新相关的操作。
7. onReachBottom:上拉触底时触发,可以在此函数中执行上拉加载更多的操作。
8. onShareAppMessage:点击分享按钮时触发,可以在此函数中定义分享的内容和行为。
9. onPageScroll:页面滚动时触发,可以在此函数中处理页面滚动相关的逻辑。
除了以上常用的生命周期钩子函数,还有其他一些钩子函数用于处理特定场景下的操作,例如onTabItemTap(当点击底部tab栏时触发)和onResize(当页面尺寸变化时触发)等。
通过使用这些生命周期钩子函数,您可以在不同的阶段执行相应的操作,实现页面的初始化、数据更新、清理和交互等功能。
uniapp页面生命周期和应用生命周期
uni-app页面生命周期包括:onLoad、onShow、onReady、onHide、onUnload等。其中,onLoad在页面加载时触发,onShow在页面显示时触发,onReady在页面初次渲染完成时触发,onHide在页面隐藏时触发,onUnload在页面卸载时触发。
应用生命周期包括:onLaunch、onShow、onHide等。其中,onLaunch在应用初始化时触发,onShow在应用进入前台时触发,onHide在应用进入后台时触发。
以下是一个uni-app页面生命周期的例子:
```vue
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello World!'
}
},
onLoad() {
console.log('页面加载完成')
},
onShow() {
console.log('页面显示')
},
onReady() {
console.log('页面初次渲染完成')
},
onHide() {
console.log('页面隐藏')
},
onUnload() {
console.log('页面卸载')
}
}
</script>
```
以下是一个uni-app应用生命周期的例子:
```vue
<script>
export default {
onLaunch() {
console.log('应用初始化')
},
onShow() {
console.log('应用进入前台')
},
onHide() {
console.log('应用进入后台')
}
}
</script>
```