您的位置:首页 > 文旅 > 美景 > 青岛网上房地产官网_北京建设工程信息网人员库里的人怎么删除_网站优化排名易下拉效率_网站的seo方案

青岛网上房地产官网_北京建设工程信息网人员库里的人怎么删除_网站优化排名易下拉效率_网站的seo方案

2025/2/7 21:07:15 来源:https://blog.csdn.net/dawfwafaew/article/details/143246785  浏览:    关键词:青岛网上房地产官网_北京建设工程信息网人员库里的人怎么删除_网站优化排名易下拉效率_网站的seo方案
青岛网上房地产官网_北京建设工程信息网人员库里的人怎么删除_网站优化排名易下拉效率_网站的seo方案

uniapp中应用级生命周期用于控制应用整体的生命周期行为,而页面级生命周期用于控制单个页面的生命周期行为。

一、应用级生命周期

应用级生命周期在 App.vue 中定义,主要包括以下生命周期钩子:

1.onLaunch:应用初始化时触发,仅触发一次。

onLaunch(options) { console.log("App Launch"); }
  • 触发时机:应用首次启动。
  • 用途:可以进行全局初始化操作,如检查用户登录状态、初始化全局变量等。

2.onShow:应用启动或从后台进入前台时触发。

onShow(options) {console.log("App Show");
}
  • 触发时机:每次从后台进入前台时。
  • 用途:适合执行需要在每次应用进入前台时更新的操作,如更新用户数据、检查推送通知等。

3.onHide:应用进入后台时触发。 

onHide() {console.log("App Hide");
}
  • 触发时机:应用进入后台时。
  • 用途:可以在此钩子中保存应用状态或暂停某些后台任务。

4.onError:应用发生错误时触发。

onError(err) { console.log("App Error", err); }

用途:捕获并处理应用级错误,便于错误日志记录和调试。

APP.vue里面测试应用生命周期:

<script>export default {onLaunch: function() {console.log('onLaunch应用初始化时触发,仅触发一次。')},onShow: function() {console.log('onShow应用启动或从后台进入前台时触发。')},onHide: function() {console.log('onHide应用进入后台时触发。')}}
</script><style>/*每个页面公共css */
</style>

 效果:

onlaunch应用生命周期是最快的

二、页面生命周期

测试案例:

<template><view><button @click="triggerScrollToBottom">模拟滚动到底部</button><button @click="triggerPullDownRefresh">模拟下拉刷新</button><view v-if="showTopButton">返回顶部按钮</view><view>分享标题:{{ shareTitle }}</view></view></template><script>export default {data() {return {showTopButton: false,shareTitle: '分享标题'};},onLoad(options) {console.log("页面加载,接收到的参数:", options);// 页面数据初始化},onShow() {console.log("onShow页面显示");// 刷新数据或重置页面状态},onReady() {console.log("onReady页面初次渲染完成");// 初始化操作,例如获取 DOM 元素或加载插件},onHide() {console.log("onHide页面隐藏");// 暂停或保存页面状态},onUnload() {console.log("onUnload页面卸载");// 清理资源或停止任务},onPullDownRefresh() {console.log("onPullDownRefresh触发下拉刷新");// 执行刷新操作setTimeout(() => {uni.stopPullDownRefresh(); // 停止下拉刷新动画console.log("停止下拉刷新");}, 1000);},onReachBottom() {console.log("onReachBottom页面滚动到底部");// 执行加载更多数据操作},onShareAppMessage() {console.log("onShareAppMessage用户点击了分享");return {title: this.shareTitle,path: "/pages/index/index"};},onPageScroll(e) {console.log("onPageScroll页面滚动,滚动位置:", e.scrollTop);// 根据滚动位置显示或隐藏返回顶部按钮this.showTopButton = e.scrollTop > 100;},methods: {// 模拟滚动到底部操作triggerScrollToBottom() {this.onReachBottom();},// 模拟下拉刷新操作triggerPullDownRefresh() {this.onPullDownRefresh();}}};</script><style scoped>/* 样式定义 */button {margin: 10px;}</style>

总结:

onLoad:页面加载时触发,接收页面传递的参数 options 并打印到控制台。

onShow:页面每次进入前台显示时触发,用于刷新数据或重置页面状态。

onReady:页面初次渲染完成时触发,适合进行页面初始化操作。

onHide:页面隐藏时触发,可以暂停或保存页面状态。

onUnload:页面卸载时触发,用于清理页面资源。

onPullDownRefresh:用户触发下拉刷新,调用 uni.stopPullDownRefresh() 停止刷新动画。

onReachBottom:页面滚动到底部时触发,可以用于加载更多数据。

onShareAppMessage:用户点击右上角分享时触发,返回分享内容。

onPageScroll:页面滚动时触发,根据滚动高度显示或隐藏返回顶部按钮。

效果:

三、生命周期使用场景

  • 应用级生命周期:适用于应用启动时进行全局状态的初始化操作或处理应用错误。
  • 页面级生命周期:适用于单个页面的数据获取、事件处理等。例如,在 onLoad 获取页面所需的数据,在 onShow 刷新页面内容。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com