Vue 3 中 onUnload 和 onPageScroll 使用详解

Vue 3 中 onUnload 和 onPageScroll 使用详解

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

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


onUnload 生命周期事件

作用

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

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

使用方式

步骤
  1. Vue 3 的 onUnload 事件可以通过组合式 API 的 onUnmounted 来实现。
  2. 如果在特定页面中处理 onUnload,需要结合小程序的 PageComponent 的生命周期绑定事件。
代码示例

以下示例展示如何在 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(如动态导航栏)。
  • 滚动动画效果。

使用方式

步骤
  1. 在 Vue 3 中,通过 onPageScroll 钩子捕获滚动事件。
  2. 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>

更多相关知识点

Vue 3 小程序支持的常见生命周期

除了 onUnloadonPageScroll,小程序开发中常用的生命周期事件包括:

  • onLoad: 页面加载时触发。
  • onShow: 页面显示时触发。
  • onHide: 页面隐藏时触发。
  • onReady: 页面初次渲染完成时触发。

事件绑定的注意事项

  1. 性能优化
    对于频繁触发的事件(如 onPageScroll),建议对事件进行节流或防抖处理。
  2. 清理资源
    onUnload 或其他生命周期结束时,应清理占用的资源(如事件监听器、定时器等),以避免内存泄漏。

总结

通过本文的学习,我们了解了如何在 Vue 3 开发的微信小程序中使用 onUnloadonPageScroll,并掌握了相关的注意事项和优化技巧。结合语法糖形式,可以让代码更加清晰简洁。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/60402.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity 使用 Excel 进行配置管理(读Excel配置表、Excel转保存Txt 文本、读取保存的 Txt 文本配置内容)

Unity 使用 Excel 进行配置管理(读Excel配置表、Excel转保存Txt 文本、读取保存的 Txt 文本配置内容) 目录 Unity 使用 Excel 进行配置管理(读Excel配置表、Excel转保存Txt 文本、读取保存的 Txt 文本配置内容) 一、简单介绍 二、实现原理 三、注意事项 四、案例简单步…

Elasticsearch向量搜索:从语义搜索到图搜图只有一步之遥

续 上集说到语义搜索&#xff0c;这集接着玩一下图搜图&#xff0c;这种场景在电商中很常见——拍照搜商品。图搜图实现非常类似语义搜索&#xff0c;代码逻辑结构都很类似… 开搞 还是老地方modelscope找个Vision Transformer模型&#xff0c;这里选用vit-base-patch16-224…

HCIA笔记3--TCP-UDP-交换机工作原理

1. tcp协议 可靠的连接 1.1 报文格式 1.2 三次握手 1.3 四次挥手 为什么TIME_WAIT需要2MSL的等待时间&#xff1f; &#xff08;a&#xff09; 为了实现可靠的关闭 &#xff08;b&#xff09;为了让过期的报文在网络上消失 对于(a), 假设host发给server的last ack丢了。 ser…

docker搭建私有仓库,实现镜像的推送和拉取

1.拉取docker仓库镜像 docker pull registry 2.启动registry容器 docker run -d registry 3.查看当前仓库中存在的镜像&#xff08;一&#xff09; curl -XGET http://192.168.111.162: 5000/v2/_catalog 192.168.111.162 部署docker仓库宿主机的ip 5000 部署docker仓库映射到宿…

提取图片高频信息

提取图片高频信息 示例-输入&#xff1a; 示例-输出&#xff1a; 代码实现&#xff1a; import cv2 import numpy as npdef edge_calc(image):src cv2.GaussianBlur(image, (3, 3), 0)ddepth cv2.CV_16Sgray cv2.cvtColor(src, cv2.COLOR_BGR2GRAY)grad_x cv2.Scharr(g…

kali安装过程中会遇到的问题和解决方法

在安装Kali Linux过程中&#xff0c;我们可能会遇到一些常见问题&#xff0c;这些问题及其解决方法如下&#xff1a; 1. 安装过程中卡住或停滞 问题描述: 安装过程卡在某一步&#xff0c;常见的如“Detecting hardware”或“Installing packages”阶段。 解决方法: 检查安装…

greater<>() 、less<>()及运算符 < 重载在排序和堆中的使用

简略图 greater<>()(a, b) a > b 返回true&#xff0c;反之返回false less<>()(a, b) a < b 返回true&#xff0c;反之返回false 在cmp中使用&#xff08;正着理解&#xff09; 规则返回true时a在前&#xff0c;反之b在前 在priority_queue中使用 &#xff…

助力企业解决降本增效的难题,Altair HPCWorks新功能创新升级

“IO一旦出现问题&#xff0c;整个计算效率会降低50%以上。License、昂贵的硬件、紧张的项目周期都会因此而卡顿&#xff0c;而HPCWorks可以帮助包括像英伟达这样的顶尖客户随时了解研发资源的实时情况和实时瓶颈。 —— Altair 企业计算部技术总监 王轶华 在2024年 Altair 技…

Java根据前端返回的字段名进行查询数据的方法

在Java后端开发中&#xff0c;根据前端返回的字段名动态查询数据库是一种常见的需求。这种需求通常通过使用反射和动态SQL来实现。下面是一个完整的代码示例&#xff0c;它展示了如何根据前端返回的字段名动态查询数据库中的数据。 一、根据前端返回的字段名动态查询数据库中的…

蓝桥杯每日真题 - 第20天

题目&#xff1a;&#xff08;机房&#xff09; 题目描述&#xff08;13届 C&CG题&#xff09; 解题思路&#xff1a; 这道题目可以看作在一个无向图中查找两点之间的最短路径。题目中的 n 台电脑和 n−1 根网线形成了一棵树&#xff0c;树是一个特殊的无向图&#xff0c…

【Python系列】浅析 Python 中的字典更新与应用场景

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

node.js、nginx、iis、tomcat针对部署方面的简述

了解 Node.js、Nginx、IIS 和 Tomcat 这些技术的部署方式及其应用场景&#xff0c;可以帮助你做出更合理的架构选择。下面是这些技术的简要讲解及它们在部署中的应用&#xff1a; 1. Node.js 部署 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境&#xff0c;广泛…

基于docker进行任意项目灵活发布

引言 不管是java还是python程序等&#xff0c;使用docker发布的优势有以下几点&#xff1a; 易于维护。直接docker命令进行管理&#xff0c;如docker stop、docker start等&#xff0c;快速方便无需各种进程查询关闭。环境隔离。项目代码任何依赖或设置都可以基本独立&#x…

【课堂笔记】隐私计算实训营第四期:“隐语”可信隐私计算开源框架

“隐语”可信隐私计算开源框架 隐语架构一览隐语架构拆解产品层算法层PSI/PIR数据分析&#xff08;Data Analysis&#xff09;联邦学习&#xff08;Federated Learning&#xff09; 计算层混合编译调度——RayFedSPUHEUTEEUYACL 资源层KUSCIA 互联互通跨域管控 隐语架构一览 隐…

Kubernetes的pod控制器

文章目录 一&#xff0c;什么是pod控制器二&#xff0c;pod控制器类型&#xff08;重点&#xff09;1.ReplicaSet2.Deployment3.DaemonSet4.StatefulSet5.Job6.Cronjob 三&#xff0c;pod与控制器的关系1.Deployment2.SatefulSet2.1StatefulSet组成2.2headless的由来2.3有状态服…

一文读懂埋阻埋容工艺

PCB 埋阻埋容工艺是一种在 PCB 板内部埋入电阻和电容的工艺。通常情况下&#xff0c; PCB 上电阻和电容都是通过贴片技术直接焊接在板面上的&#xff0c;而埋阻埋容工艺则将电 阻和电容嵌入到 PCB 板的内部层中&#xff0c;这种印制电路板,其自下而上依次包括第一介电 层,隐埋电…

QA|使用 MapleSim 模拟卷料生产 (Converting)和卷对卷系统 (R2R)

使用 MapleSim 模拟卷料生产 (Converting)和卷对卷系统 (R2R) 纸张、薄膜、塑料、金属箔、新能源电池和卷料生产设备 (converting equipment) 的制造商正在转向建模和仿真&#xff0c;以提升卷料处理的设备性能和产品质量。MapleSim 卷料处理库提供了专业的建模元件以及功能&a…

MATLAB读入不同类型图像并显示图像和相关信息

MATLAB&#xff08;Matrix Laboratory)是一种常用的数学工具软件&#xff0c;MATLAB以矩阵运算为核心&#xff0c;为图像处理提供了高效的数据处理能力。图像处理中的许多操作都可以转化为矩阵运算&#xff0c;从而利用MATLAB的矩阵运算能力进行优化和加速。在图像处理方面&…

学习日志015--python单链表

创建 class Node:def __init__(self,data):# 数据域self.data data# 链接域self.next Noneclass LinkList:def __init__(self,):# 初始化头节点self.head None# 记录链表的长度self.size 0 增加 #头插def insert_head(self,value):# 创建新节点node Node(value)q self…

使用vue-i18n为你的Vue应用添加多语言支持

前言 在如今的互联网世界中&#xff0c;产品的国际化&#xff08;Internationalization&#xff0c;简称 i18n&#xff09;变得越来越重要。国际化不仅仅是将文本翻译成多种语言&#xff0c;更是提升用户的全球体验。如果你正在使用 Vue.js 构建应用&#xff0c;那么你可以借助…