uniapp生命周期函数

小汤猿人类

已于 2024-09-02 11:32:52 修改

阅读量318

点赞数 5

文章标签： uni-app

于 2024-09-01 23:47:26 首次发布

本文链接：https://blog.csdn.net/a1241436267/article/details/141790287

版权

常见页面生命周期函数

onLoad(options): 页面加载时触发，可以接收启动页面时的参数

onShow:

onReady: 页面初次渲染完成时触发。

onHide: 页面被隐藏时触发

onUnload: 页面被关闭时触发

onPageScroll:滚动条滚动时触发

生命周期钩子的顺序：

onLoad：当页面加载时触发。
onShow：当页面显示时触发。
onReady：当页面初次渲染完成时触发。
onHide：当页面被隐藏时触发。
onUnload：当页面被关闭或销毁时触发。

onLoad作用

获取url传递的参数,可以使用onLoad来获取,具体实现可以查看

如何获取以下url传递的参数?
可以通过onLoad()来获取.onLoad有一个形参,用于接收初始化的参数
	import {
		onLoad
	} from '@dcloudio/uni-app'
	onLoad((e) => {
		console.log(e);
	})

onShow作用

onShow 会在以下几种情况下被调用：

页面首次加载时：当用户首次打开页面时，onShow 会被触发。
页面从后台回到前台时：如果用户切换到其他页面或应用，然后再次回到当前页面，onShow 也会被触发。
从其他页面返回当前页面时：当用户从一个导航栈中的其他页面返回到当前页面时，onShow 会被触发。

与 onLoad 的区别

触发时机：onLoad 只在页面首次加载时触发一次，而 onShow 每次页面显示时都会触发。

用途：onLoad 更适合用于初始化页面数据和执行一次性操作，而 onShow 则适合用于更新页面数据和执行周期性操作。

onReady 的作用：

DOM 操作：onReady 是执行依赖于 DOM 的操作的最佳时机。由于此时页面已经完成初次渲染，DOM 元素已经存在，可以安全地进行选择和操作。

初始化组件：可以在此时初始化一些需要 DOM 支持的组件，如地图、图表、富文本编辑器等。

绑定事件监听器：如果需要绑定一些依赖于 DOM 元素的事件监听器，可以在 onReady 中进行绑定。

动画和样式调整：如果需要在页面加载完成后立即执行动画或调整样式，onReady 是一个合适的时机。

资源加载：如果页面需要加载额外的资源（如字体、图片等），在这些资源加载完毕后，onReady 可以确保这些资源已经被加载，从而可以安全地使用它们。

第三方库初始化：如果页面使用了第三方库，这些库可能需要 DOM 元素存在才能正常工作，可以在 onReady 中进行初始化。

onHide 的用法

onHide 是 UniApp 中的一个页面生命周期函数，它在页面被隐藏时触发。这个函数非常适合用来处理页面隐藏时需要执行的操作，例如保存状态、暂停定时器、释放资源等。

onHide 主要在以下情况被触发：

用户导航到另一个页面。
用户切换到其他应用或锁屏。
用户关闭当前页面（但在某些情况下，onUnload 而不是 onHide 会被触发）。

onUnload 的作用

资源释放：可以在 onUnload 钩子中执行一些资源释放的操作，比如清除定时器、取消网络请求、释放内存等。
数据同步：如果页面有一些数据需要保存到本地存储或同步到服务器，可以在 onUnload 时进行处理。
状态恢复：如果页面有一些临时的状态需要在关闭前进行恢复或清理，可以在 onUnload 中做这些操作。

onUnload 是一个生命周期钩子，在 UniApp 中用于指定当页面被关闭或销毁时执行的函数。这个钩子在以下几种情况下会被触发：

用户离开当前页面：当用户通过点击导航按钮或其他方式离开当前页面时。
页面被关闭：当通过 API 如 uni.navigateBack 或其他方式关闭当前页面时。
应用被置于后台：如果应用进入后台运行，而当前页面不是栈顶页面，则当前页面会被销毁。

测试

页面加载时：

控制台输出 页面加载,触发onLoad。

进入页面时：

控制台输出 进入页面,触发onShow。

页面渲染完成时：

控制台输出 页面渲染完成,触发onReady。

页面被隐藏时：

控制台输出 页面被隐藏,触发onHide。

页面被卸载时：

控制台输出 页面卸载,触发onUnload。
<template>
	<div>

	</div>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onReady,
		onHide,
		onUnload
	} from '@dcloudio/uni-app'
	onLoad(() => {
		console.log('页面加载,触发onLoad');
	})
	onShow(() => {
		console.log('进入页面,触发onShow');
	})
	onReady(()=>{
		console.log('页面渲染完成,触发onReady');
	})
	onHide(()=>{
		console.log('页面被隐藏,触发onHide');
		
	})
	onUnload(()=>{
		console.log('页面被销毁,触发onUnload');
	})
	
	
</script>

<style scoped>

</style>

onPageScroll的作用

监听滚动距离：获取页面滚动的距离，通常用于计算滚动位置。
动态布局调整：根据滚动距离调整页面元素的位置或样式，例如实现导航栏的吸顶效果。
优化性能：结合防抖（debounce）等技术减少事件处理函数的频繁调用，提高性能。
实现特定功能：例如将某个视图元素在滚动到特定位置时固定在顶部或底部，或者在滚动到底部时加载更多内容。

onPageScroll 的参数

onPageScroll 通常接受一个对象参数，其中包含以下属性：

scrollTop：页面垂直滚动的距离，单位为像素。
scrollLeft：页面水平滚动的距离，单位为像素。
timeStamp：滚动事件发生的时间戳。

案例
<template>
	<div v-for="item in 100">
		{{item}}
	</div>
	<view class="float" v-show="isShow">

	</view>
</template>

<script setup>
	import {
		onPageScroll
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	let isShow = ref(false)
	onPageScroll((e) => {
		if (e.scrollTop >= 300 && e.scrollTop <= 500) {
			console.log(e.scrollTop);
			isShow.value = true
		} else {
			isShow.value = false
		}

	})
</script>

<style scoped>
	.float {
		width: 100px;
		height: 100px;
		background-color: aqua;
		position: fixed;
		bottom: 50px;
		right: 20px;
	}
</style>