页面生命周期onLoad,onReady,onShow和onHide,onUnload和onPageScroll在vue3中组合应用

通过前面的知识点我们知道了什么是生命周期,以及生命周期的几个阶段性

这次让我们一起来了解页面生命周期中的onLoad,onReady,onShow和onHide,onUnload和onPageScroll应用

这三个函数的执行顺序为onLoad-onShow-onReady

uni-app 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数，当以组合式 API 使用时，在 Vue2 和 Vue3 中存在一定区别，请分别参考：Vue2 组合式 API 使用文档 和 Vue3 组合式 API 使用文档

该介绍提供了两个函数具体的用法(导入,格式等等)

onLoad函数作用:可以进行传参

写onLoad函数时注意点:

1.注意这里是驼峰,是大写

2.记得导入模块,不然会报错

 

使用navigator属性里面的url函数可以实现页面跳转,还可以传参

比如:我们从上一个页面跳转到这个页面来,并且可以把上一个页面赋的值传到这个页面来,进行渲染,并且传过来的值两个页面定义的变量或常量名保持一致才能传过来

本页面定义一个常量或变量,放入onLoad方法属性中,进行渲染

效果:

onReady函数:代表DOM已经挂载完毕了

先导入模块,然后定义一个常量,在onReady函数方法里打印出来

onShow函数:无论是新页面跳转进来,还是离开本页面然后再跳转会来,onShow函数都会触发

onHide函数:只要离开焦点(如:离开页面跳回来后触发)后触发

onUnload函数和onPageScroll函数的应用:

onUnload函数:主要用于页面卸载

先导入onUnload模块,再写一个onUnload函数方法里面控制台打印输出提示语

我们可以在本页面再写一个跳转到新页面,跳回来后卸载新页面,然后我们发现跳转到新页面之后,上面有箭头仍然可以返回,这说明并没有真正删除页面,而是缓存了起来,后台并不会显示输出提示语

标签里加上open-type="reLaunch",这样就真正卸载页面了,后台也有提示语显示,说明我们卸载函数起效了

onPageScroll函数:监听页面滚动，参数为Object

先导入模块,然后写一个常量默认为false,里面写一个if判断把常量放进去

onPageScroll函数方法里写一个判断,滚动条数大于200时,让这个就箭头显示出来,反之小于200隐藏

滚动箭头样式: