Vue 3 中 onUnload 和 onPageScroll 使用详解

在 Vue 3 中，当我们开发微信小程序时，通常需要处理页面生命周期事件和页面滚动事件，比如页面卸载 (onUnload) 和页面滚动 (onPageScroll) 等。这些功能对优化用户体验、实现动态效果以及处理页面状态管理至关重要。

本文将详细介绍如何在 Vue 3 中使用 onUnload 和 onPageScroll，包括语法糖的使用方式，并附加完整代码示例。

onUnload 生命周期事件

作用

onUnload 是微信小程序的页面生命周期事件，触发时机是页面卸载（离开当前页面，或者关闭页面）时。常见的应用场景包括：

清理页面数据。
停止未完成的请求。
释放内存占用资源（如定时器、监听器等）。

使用方式

步骤

Vue 3 的 onUnload 事件可以通过组合式 API 的 onUnmounted 来实现。
如果在特定页面中处理 onUnload，需要结合小程序的 Page 或 Component 的生命周期绑定事件。

代码示例

以下示例展示如何在 onUnload 中清理定时器：

<template><view class="container"><text>{{ message }}</text></view>
</template><script setup>
import { ref, onUnmounted } from 'vue';const message = ref('正在加载数据...');
let timer;function startTimer() {timer = setInterval(() => {console.log('计时器运行中...');}, 1000);
}// 页面卸载时清理定时器
onUnmounted(() => {console.log('页面卸载，清理定时器');if (timer) {clearInterval(timer);}
});// 初始化逻辑
startTimer();
</script><style scoped>
.container {display: flex;justify-content: center;align-items: center;height: 100vh;
}
</style>

onPageScroll 页面滚动事件

作用

onPageScroll 是微信小程序提供的页面滚动事件，触发时机为用户滚动页面时。常见的应用场景包括：

实现滚动加载（如无限滚动）。
根据滚动位置改变 UI（如动态导航栏）。
滚动动画效果。

使用方式

步骤

在 Vue 3 中，通过 onPageScroll 钩子捕获滚动事件。
onPageScroll 提供滚动位置信息，通过 scrollTop 获取滚动距离。

代码示例

以下示例实现滚动动态导航栏效果：

<template><view class="page"><view :class="['navbar', { sticky: isSticky }]">导航栏</view><scroll-view scroll-y="true" class="content"><view v-for="item in 50" :key="item" class="item">内容 {{ item }}</view></scroll-view></view>
</template><script setup>
import { ref, onMounted, onUnmounted } from 'vue';const isSticky = ref(false);// 监听滚动事件
function handleScroll({ scrollTop }) {isSticky.value = scrollTop > 100; // 滚动超过 100px 时固定导航栏
}// 注册滚动事件
onMounted(() => {wx.onPageScroll(handleScroll);
});// 卸载时移除滚动事件
onUnmounted(() => {wx.offPageScroll(handleScroll);
});
</script><style scoped>
.page {height: 100vh;overflow: hidden;
}
.navbar {width: 100%;height: 50px;line-height: 50px;text-align: center;background-color: #eee;transition: all 0.3s;
}
.navbar.sticky {background-color: #333;color: #fff;
}
.content {height: calc(100vh - 50px);overflow-y: scroll;
}
.item {height: 50px;line-height: 50px;text-align: center;border-bottom: 1px solid #ddd;
}
</style>