uni-app学习笔记十六-vue3页面生命周期(三)

moxiaoran57532025-06-01 10:25

uni-app官方文档页面生命周期部分位于页面 | uni-app官网。

本篇再介绍2个生命周期

当页面被关闭时，即页面的缓存被清掉时触发加载onUnload函数。

例如:在demo6页面点击跳转到demo4，在demo4页面回退不了到demo6，此时demo6页面被关闭了会触发onUnload函数。如下面两张图，上图不会触发onUnload，下图会触发onUnload

如何做到销毁之前的页面，不能回退到之前的页面呢？主要是通过在navigator组件里设置参数open-type，下面来看下，都可以设置哪些参数值：

当open-type属性被设置为reLaunch值时，会关闭所有页面，打开应用内某个页面。

示例代码：

html 复制代码

<view>
	<navigator open-type="reLaunch" url="/pages/demo4/demo4">跳转到demo4</navigator>
</view>

onPageScroll用于监听页面滚动，参数为Object。

小示例：

javascript 复制代码

onPageScroll((e)=>{
	console.log(e.scrollTop)
	fixed.value = e.scrollTop>300 ? true :false
})

上面的代码实现，当滚动到300时，控制某一区块的显示与隐藏。效果如下图所示：

注意：onPageScroll在nvue是不受支持的。