当前位置： 首页 > article >正文

从零打造一个丝滑的 Vue 3 返回顶部组件

article 2026/4/12 2:19:05
从零打造一个丝滑的 Vue 3 返回顶部组件这个组件具备以下特性智能显示滚动超过指定距离默认 300px后自动出现。丝滑动画使用 Vue 内置的Transition实现淡入上滑的出现 / 消失效果。平滑滚动点击后通过behavior: smooth实现平滑回顶。类型安全使用 TypeScript 定义 Props开发体验极佳。它涵盖了 Vue 3 开发中几个非常核心的最佳实践Composition API的逻辑复用与组织。生命周期钩子的正确使用特别是事件解绑。原生 DOM API(window.scrollTo) 的结合。CSS Transition的视觉效果优化。代码解析模板结构 (Template)template!-- 使用 Transition 包裹给按钮加上场/退场动画 --Transitionnameslide-upbuttonv-ifvisibleclickscrollToTopclassback-to-top-btn:titletooltip!-- 内嵌 SVG 向上箭头图标避免引入外部图片资源 --svgclassiconfillnonestrokecurrentColorviewBox0 0 24 24pathstroke-linecaproundstroke-linejoinroundstroke-width2dM5 10l7-7m0 0l7 7m-7-7v18//svg/button/Transition/templateTransitionVue 提供的内置组件当v-if切换时自动应用 CSS 过渡类名。SVG 图标直接内嵌 SVG减少网络请求且通过currentColor继承父元素颜色方便样式控制。逻辑核心 (Script)script setup langtsimport{ref,onMounted,onUnmounted}fromvue// 1. 定义 Props使用 withDefaults 设置默认值constpropswithDefaults(defineProps{threshold?:number// 滚动阈值超过此值显示按钮tooltip?:string// 鼠标悬停提示文字}(),{threshold:300,tooltip:返回顶部})// 2. 响应式状态控制按钮显示/隐藏constvisibleref(false)// 3. 滚动处理函数判断当前滚动位置consthandleScroll(){visible.valuewindow.scrollYprops.threshold}// 4. 核心动作执行滚动到顶部constscrollToTop(){window.scrollTo({top:0,behavior:smooth// 关键实现平滑滚动而非瞬间跳转})}// 5. 生命周期挂载时监听滚动事件onMounted((){window.addEventListener(scroll,handleScroll)})// 6. 生命周期卸载时移除监听非常重要防止内存泄漏onUnmounted((){window.removeEventListener(scroll,handleScroll)})/scriptwithDefaults配合 TypeScript 的defineProps优雅地给 Props 赋默认值。onUnmounted这是新手容易忽略的点。如果组件销毁了但不移除window上的事件监听器会导致内存泄漏或报错。behavior: smooth原生 API比自己写定时器动画要高效得多。样式设计 (Style)style scoped .back-to-top-btn{position:fixed;/* 固定定位悬浮在页面右下角 */bottom:2rem;right:2rem;width:3rem;height:3rem;background:#4f46e5;/* 靛蓝色现代感强 */color:white;border:none;border-radius:50%;/* 圆形按钮 */cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12pxrgba(79,70,229,0.4);/* 柔和阴影 */transition:all 0.3s ease;z-index:1000;/* 确保层级够高不被其他元素遮挡 */}.back-to-top-btn:hover{background:#4338ca;/* 悬停变深色 */transform:translateY(-4px);/* 悬停上浮效果 */box-shadow:0 8px 20pxrgba(79,70,229,0.5);}.back-to-top-btn:active{transform:translateY(-2px);/* 点击时的按压反馈 */}/* Transition 动画对应的 CSS 类 */.slide-up-enter-active, .slide-up-leave-active{transition:all 0.3s ease;}.slide-up-enter-from, .slide-up-leave-to{opacity:0;transform:translateY(20px);/* 从下方 20px 处滑入 */}/style交互反馈通过:hover和:active伪类配合transform让按钮有 “呼吸感”。动画类名slide-up-enter-from定义了初始状态透明且位置偏下Vue 会自动在合适的时机切换类名。如何在项目中使用将上述代码保存为BackToTop.vue。在你的页面组件通常是Layout或App.vue中引入templatedivclassvery-long-page-content!-- 你的页面内容 --/div!-- 直接使用也可以传入 threshold 自定义显示距离 --BackToTop:threshold500//templatescriptsetuplangtsimportBackToTopfrom./components/BackToTop.vue/script

相关文章：

从零打造一个丝滑的 Vue 3 返回顶部组件

从零打造一个丝滑的 Vue 3 返回顶部组件 这个组件具备以下特性&#xff1a; 智能显示&#xff1a;滚动超过指定距离&#xff08;默认 300px&#xff09;后自动出现。丝滑动画&#xff1a;使用 Vue 内置的 <Transition> 实现淡入上滑的出现 / 消失效果。平滑滚动&#xff…...

编程日记 2026/4/12 2:19:05

Vue3中的computed 与 watch 的区别

Vue3中的computed 与 watch 的区别 当你想要合成一个新数据用来显示时&#xff0c;选 computed。当你想要在数据变化时搞点事情&#xff08;调接口、存本地、操作 DOM&#xff09;&#xff0c;选 watch。 computed&#xff1a;计算属性 computed 主要用于数据的衍生与转换。它基…...

编程日记 2026/4/12 2:19:05

IPv4 与 IPv6 的核心区别

IPv4与IPv6的区别 一句话总结&#xff1a;IPv4 地址不够用、配置麻烦、安全性弱&#xff1b;IPv6 地址极多、自动配置、性能更强&#xff0c;是下一代互联网协议。 一、核心区别详情 1. 地址长度与数量IPv4&#xff1a;32位&#xff0c;地址总数约 42.9亿&#xff0c;随着互联网…...

编程日记 2026/4/12 2:19:05

兼容性测试覆盖多平台与多版本

兼容性测试&#xff1a;跨越平台与版本的品质保障 在数字化时代&#xff0c;软件和应用程序需要在多种操作系统、设备和版本上稳定运行。兼容性测试作为质量保障的关键环节&#xff0c;确保产品在不同环境下表现一致。随着用户终端多样化&#xff0c;覆盖多平台与多版本的测试…...

编程日记 2026/4/12 2:17:05

ASyncTicker：嵌入式非中断周期任务调度器

1. ASyncTicker&#xff1a;面向嵌入式实时系统的非中断式周期任务调度器在嵌入式系统开发中&#xff0c;周期性任务调度是高频刚需——LED呼吸灯、传感器采样、通信心跳包、PID控制循环、状态机轮询等场景均依赖稳定、可预测的定时触发机制。传统方案多基于硬件定时器中断服务…...

编程日记 2026/4/12 2:17:04

软件可解释性的决策原因与逻辑展示

## 软件可解释性&#xff1a;让算法决策不再神秘 在人工智能和机器学习快速发展的今天&#xff0c;越来越多的决策由软件系统自动完成。许多复杂的算法&#xff08;如深度神经网络&#xff09;往往被视为“黑箱”&#xff0c;其决策过程难以理解。这种不透明性可能导致用户对系…...

编程日记 2026/4/12 2:17:04

拆穿名词诈骗！用大白话理解晦涩难懂的AI概念谒

1. 架构背景与演进动力 1.1 从单体到碎片化&#xff1a;.NET 的开源征程 在.NET Framework 时代&#xff0c;构建系统主要围绕 Windows 操作系统紧密集成&#xff0c;采用传统的封闭式开发模式。然而&#xff0c;随着.NET Core 的推出&#xff0c;微软开启了彻底的开源与跨平台…...

编程日记 2026/4/12 2:17:04

再次革新 .NET 的构建和发布方式（一）帕

本文能帮你解决什么&#xff1f; 1. 搞懂FastAPI异步&#xff08;async/await&#xff09;到底在什么场景下能真正提升性能。 2. 掌握在FastAPI中正确使用多线程处理CPU密集型任务的方法。 3. 避开常见的坑&#xff08;比如阻塞操作、数据库连接池耗尽、GIL限制&#xff09;。 …...

编程日记 2026/4/12 2:17:02

GoCodingInMyWay淖

一、什么是 Q 饱和运算&#xff1f; 1. 核心痛点&#xff1a;普通运算的 “数值回绕” 普通算术运算&#xff08;如 ADD/SUB&#xff09;溢出时&#xff0c;数值会按补码规则 “回绕”&#xff0c;导致结果完全错误&#xff1a; 示例&#xff1a;int8_t 类型最大值 127 1 → 结…...

编程日记 2026/4/12 2:15:02

YOLO-Master 与 YOLO 开始朴

AI Agent 时代的沙箱需求 从 Copilot 到 Agent&#xff1a;执行能力的质变 在生成式 AI 的早期阶段&#xff0c;应用主要以“Copilot”形式存在&#xff0c;AI 仅作为辅助生成建议。然而&#xff0c;随着 AutoGPT、BabyAGI 以及 OpenAI Code Interpreter&#xff08;现为 Advan…...

编程日记 2026/4/12 2:15:02

微服务可观测性建设

微服务可观测性建设&#xff1a;打造高效运维的基石 在数字化转型的浪潮中&#xff0c;微服务架构凭借其灵活性和可扩展性成为企业技术演进的主流选择。随着服务数量的激增和分布式系统的复杂性提升&#xff0c;传统的监控手段已难以满足运维需求。微服务可观测性建设应运而生…...

编程日记 2026/4/12 2:15:02

使用 Alertmanager 配置智能告警

在微服务与云原生架构盛行的当下&#xff0c;系统监控与告警管理成为保障业务稳定性的关键环节。Alertmanager作为Prometheus生态中的核心告警组件&#xff0c;通过灵活的配置和智能路由策略&#xff0c;能够将海量告警转化为精准的行动指令&#xff0c;帮助运维团队快速响应问…...

编程日记 2026/4/12 2:14:59

RGBW色彩转换器：嵌入式系统高保真白光增强方案

1. RGBW色彩转换器技术解析&#xff1a;面向嵌入式显示系统的高保真白光增强方案1.1 工程背景与设计动因在LED显示与智能照明嵌入式系统中&#xff0c;RGB三色LED驱动已成主流&#xff0c;但其在高亮度白光输出场景下存在固有缺陷&#xff1a;当需呈现高亮度中性白&#xff08;…...

编程日记 2026/4/12 2:12:58

CopyOnWriteArrayList 实现原理

什么是CopyOnWriteArrayList&#xff1f;CopyOnWriteArrayList 是 Java 并发包 (java.util.concurrent) 中一个非常独特且重要的线程安全集合。与 Collections.synchronizedList 不同&#xff0c;CopyOnWriteArrayList 不依赖外部同步&#xff0c;而是通过内部机制实现并发控制…...

编程日记 2026/4/12 2:12:58

ADS1220_WE库详解：工业级24位ADC驱动与高精度传感器采集实现

1. ADS1220_WE 库深度技术解析&#xff1a;面向工业级高精度采集的 24 位四通道 ADC 驱动实现1.1 芯片级定位与工程价值ADS1220 是德州仪器&#xff08;TI&#xff09;推出的低功耗、高精度、24 位 Δ-Σ 型模数转换器&#xff0c;专为工业传感器信号调理场景设计。其核心价值不…...

编程日记 2026/4/12 2:12:58

VL6180X_WE中断驱动库：工业级ToF传感器低功耗实时方案

1. VL6180X_WE 库概述&#xff1a;面向工业级应用的增强型 ToF 传感器驱动 VL6180X_WE 是一款专为意法半导体&#xff08;STMicroelectronics&#xff09;VL6180X 飞行时间&#xff08;Time-of-Flight, ToF&#xff09;传感器设计的嵌入式 C 驱动库。该库并非从零构建&#xf…...

编程日记 2026/4/12 2:12:58

Adafruit ZeroI2S：面向Cortex-M0+/M4的零拷贝I2S音频驱动

1. 项目概述Adafruit ZeroI2S 是专为基于 SAMD21&#xff08;Arduino Zero / Adafruit Metro M0 Express / Feather M0 Express&#xff09;与 SAMD51&#xff08;Adafruit Metro M4 Express / Feather M4 Express / ItsyBitsy M4 Express&#xff09;微控制器的 Arduino 兼容开…...

编程日记 2026/4/12 2:12:58

Linux I/O 演进史：从管道到零拷贝，一篇串起个服务端核心原语撑

前言 在使用 kubectl get $KIND -o yaml 查看 k8s 资源时&#xff0c;输出结果中包含大量由集群自动生成的元数据&#xff08;如 managedFields、resourceVersion、uid 等&#xff09;。这些信息在实际复用 yaml 清单时需要手动清理&#xff0c;增加了额外的工作量。 使用 kube…...

编程日记 2026/4/12 2:10:58

-：RAG 入门-向量存储与企业级向量数据库 milvus匾

起因是我想在搞一些操作windows进程的事情时&#xff0c;老是需要右键以管理员身份运行&#xff0c;感觉很麻烦。就研究了一下怎么提权&#xff0c;顺手瞄了一眼Windows下用户态权限分配&#xff0c;然后也是感谢《深入解析Windows操作系统》这本书给我偷令牌的灵感吧&#xff…...

编程日记 2026/4/12 2:10:58

代码规范与团队协作效率

代码规范与团队协作效率&#xff1a;提升开发质量的关键 在软件开发中&#xff0c;代码规范与团队协作效率是决定项目成败的重要因素。统一的代码规范能减少维护成本&#xff0c;提高可读性&#xff0c;而高效的团队协作则能加速交付周期&#xff0c;降低沟通成本。尤其在多人…...

编程日记 2026/4/12 2:10:57

路由权限管理

路由权限管理&#xff1a;构建安全高效的前端架构 在现代前端开发中&#xff0c;路由权限管理是保障系统安全性和用户体验的核心环节。随着单页应用&#xff08;SPA&#xff09;的普及&#xff0c;前端路由的复杂性逐渐增加&#xff0c;如何动态控制用户访问权限成为开发者必须…...

编程日记 2026/4/12 2:10:57

使用 Python 设置 Excel 表格的行高与列宽

在技术领域&#xff0c;我们常常被那些闪耀的、可见的成果所吸引。今天&#xff0c;这个焦点无疑是大语言模型技术。它们的流畅对话、惊人的创造力&#xff0c;让我们得以一窥未来的轮廓。然而&#xff0c;作为在企业一线构建、部署和维护复杂系统的实践者&#xff0c;我们深知…...

编程日记 2026/4/12 2:10:53

计算机毕业设计：Python城市空气质量智能监测与预测平台 Django框架 可视化 数据分析 Prophet时间序列 大数据 大模型 深度学习（建议收藏）✅

博主介绍&#xff1a;✌全网粉丝10W,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业项目实战6年之久&#xff0c;选择我们就是选择放心、选择安心毕业✌ > &#x1f345;想要获取完整文章或者源码&#xff0c;或者代做&#xff0c;拉到文章底部即可与…...

编程日记 2026/4/12 2:08:53

Pharma RAG：企业知识库的架构革命

一、为什么制药行业的知识库问题比你想的严重 一名医学写作（Medical Writer）在准备 CTD 5.3.5.1（临床研究报告摘要）时，需要交叉引用： 3 份 Phase III CSR（临床研究报告），每份 800–2000 页 协议书修正案 5 个版本 统计分析报告（SAP）+ 列表表格（TLF）共 1200 张 竞…...

编程日记 2026/4/12 2:08:53

AI Agent Pharma：从 Copilot 到 Autonomous Pharma

当药物研发遇上 AI Agent，不是锦上添花，是游戏规则的重写。本文拆解架构、给出可跑的代码、聊聊那些 PPT 不会告诉你的坑。在这里插入图片描述 一、我为什么在写这篇文章 大概是 2023 年末，我们团队拿到了一个任务：帮某中型药企的研发部门"引入 AI"。预算不小，…...

编程日记 2026/4/12 2:08:52

CKKS 同态加密数学基础推导信

背景 StreamJsonRpc 是微软官方维护的用于 .NET 和 TypeScript 的 JSON-RPC 通信库&#xff0c;以其强大的类型安全、自动代理生成和成熟的异常处理机制著称。在 HagiCode 项目中&#xff0c;为了通过 ACP (Agent Communication Protocol) 与外部 AI 工具&#xff08;如 iflow …...

编程日记 2026/4/12 2:08:52

从识别到创作：Hunyuan OCR与Z-Image-Turbo在NPU平台上的协同进化，重塑AI视觉工作流

1. 当OCR遇上图像生成&#xff1a;Hunyuan与Z-Image-Turbo的化学反应 第一次看到Hunyuan OCR和Z-Image-Turbo在同一个NPU平台上跑起来时&#xff0c;我正忙着处理一堆杂乱的产品说明书。这些文档有扫描件、手机拍摄的模糊照片&#xff0c;甚至还有手写批注的PDF。传统方案需要…...

编程日记 2026/4/12 2:08:52

Linpeas使用教程

在Kali Linux的权限提升工具库中&#xff0c;Linpeas&#xff08;Linux Privilege Escalation Awesome Script&#xff09;是一款专注于Linux系统本地权限提升的自动化脚本工具&#xff0c;隶属于“PEASS&#xff08;Privilege Escalation Awesome Scripts SUITE&#xff09;”…...

编程日记 2026/4/12 2:06:52

思博伦TCL并发测试避坑指南：HTTP/1.1配置与端口关联的最佳实践

思博伦TCL并发测试避坑指南&#xff1a;HTTP/1.1配置与端口关联的最佳实践 在性能测试领域&#xff0c;思博伦&#xff08;Spirent&#xff09;的TCL测试工具因其强大的功能和灵活性而备受推崇。然而&#xff0c;正是这种灵活性也带来了配置上的复杂性&#xff0c;特别是在HTTP…...

编程日记 2026/4/12 2:06:52

PEASS使用教程

在Kali Linux的权限提升工具生态中&#xff0c;PEASS&#xff08;Privilege Escalation Awesome Scripts SUITE&#xff0c;权限提升优秀脚本套件&#xff09;是一款覆盖Linux与Windows双平台的自动化权限提升扫描工具集。它通过整合Linpeas&#xff08;Linux平台&#xff09;与…...

编程日记 2026/4/12 2:06:52