Vue 3 中 onUnload 和 onPageScroll 使用详解

news2024/11/23 21:33:49

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>