React@16.x(43)路由v5.x(8)常见应用场景(5)- 滚动条复位

目录

  • 1,滚动条复位
  • 2,在 React 中的触发的3种方式
    • 2.1,高阶组件
    • 2.2,useEffect
    • 2.3,路由守卫

1,滚动条复位

因为切换路由,页面并不会刷新,所以需要手动复位滚动条。实现滚动条复位是比较简单的,注意点在于 React 中的触发时机。

滚动条复位实现逻辑:resetScroll.js

let timer1, timer2;export default function resetScroll() {// 先清理,是因为当切换路由后,滚动动画还没有完成时,又切换了路由。此时需要重新开始动画。clearInterval(timer1);clearInterval(timer2);const html = document.documentElement;timer1 = animate(html.scrollTop, 0, (value) => {html.scrollTop = value;});timer2 = animate(html.scrollLeft, 0, (value) => {html.scrollLeft = value;});
}/*** @param {*} start 滚动起始点* @param {*} end 滚动终点(0)* @param {*} callback 计时器每次触发的函数,会传递最新的滚动距离。* @param {*} totalTime 滚动总时间* @returns*/
function animate(start, end, callback, totalTime = 100) {const tick = 16;const times = Math.ceil(totalTime / 16); // 变化次数const distance = (start - end) / times; // 每次运动的距离let curTimes = 0;let timer = setInterval(() => {curTimes++;start -= distance;if (curTimes >= times) {clearInterval(timer);start = end;}callback(start);}, tick);return timer;
}

2,在 React 中的触发的3种方式

2.1,高阶组件

对类组件使用高阶组件封装,并在返回的类组件中的 componentDidMount() 中调用 resetScroll() 即可。不多赘述。

2.2,useEffect

定义一个依赖项为 pathname 的 HOOK 函数,并在目标路由组件中执行即可。

function useScroll(pathname) {useEffect(() => {resetScroll();}, [pathname]);
}

App.jsx

import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";
import { useScroll } from "./hooks";
import "./App.css";function News(props) {useScroll(props.location.pathname);return <div className="page news">News</div>;
}function Goods(props) {useScroll(props.location.pathname);return <div className="page goods">Goods</div>;
}export default function App() {return (<div className="container"><Router><div className="nav-box"><NavLink to="/news">新闻页</NavLink><NavLink to="/goods">商品页</NavLink></div><div className="page-box"><Route path="/news" component={News}></Route><Route path="/goods" component={Goods}></Route></div></Router></div>);
}

App.css

.nav-box {position: fixed;top: 0;margin: 0 auto;height: 50px;
}.nav-box a {display: inline-block;margin: 10px;
}.nav-box a.active {color: salmon;
}.page-box {margin-top: 50px;
}.page {height: 150vh;width: 150vh;
}.page.news {background-color: lightgreen;
}.page.goods {background-color: lightyellow;
}

2.3,路由守卫

上篇文章中介绍了路由守卫。

所以可在路由发生变化时执行 resetScroll() 即可。

export default function App() {return (<div className="container"><RouteGuardonRouteChange={(prevLocation, nextLocation) => {// 因为点击相同路由也会执行,所以增加判断。if (prevLocation.pathname !== nextLocation.nextLocation) {resetScroll();}}}>{/* ... */}</RouteGuard></div>);
}

以上。

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

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

相关文章

YOLOv5改进 | 注意力机制 | 迈向高质量像素级回归的极化自注意力【全网独家】

秋招面试专栏推荐 &#xff1a;深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 &#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 专栏目录&#xff1a; 《YOLOv5入门 …

高精密机械设备中滚珠导轨的表面处理工艺有哪些?

滚珠导轨是机床传动和定位的传动元件&#xff0c;其表面处理方式对机床性能和使用寿命起着决定性的作用&#xff0c;不同的表面处理方法可以提高导轨的耐磨性、抗腐蚀性和整体性能。那么&#xff0c;滚珠导轨的表面处理方式有哪几种呢&#xff1f; 1、磨削法&#xff1a;磨削技…

AFLNet入门教学——安装(Ubuntu22.04.4)

1、AFLNet简介 AFLNet 是一种专门用于测试网络协议实现的模糊测试工具。模糊测试是一种软件测试技术&#xff0c;通过向目标程序提供大量随机或半随机数据来发现潜在的漏洞和错误。AFLNet 的设计目标是增强 AFL (American Fuzzy Lop) 的功能&#xff0c;以更有效地测试网络协议…

人事精选面试问题汇总

1.请简单介绍一下你的大学和专业&#xff0c;都开设了哪些课程&#xff0c;以及考试分数为多少&#xff1f; 答&#xff1a;高等数学、大学英语、专业英语、概率统计、离散数学、电路、模拟电子、数字电子、数据结构、操作系统、编译原理、计算机网络、数据库原理、软件工程、汇…

input子系统学习(一)

1、输入子系统框架 2、编写一个简单的设备驱动层代码 #include<linux/module.h> #include<linux/init.h> #include<linux/input.h> #include<linux/time.h>struct input_dev *my_input_dev;static void timer_function(struct timer_list *t); DEFINE…

中医背诵笔记(黄帝内经、伤寒论等)

目录 黄帝内经上古天真论今人和古人之差异&#xff08;精神内守&#xff0c;病安从来&#xff1f;&#xff09;男女每个年龄阶段身体状态至人、圣人、贤人 宣明五气篇五脏所藏 与 五脏所主七情与情绪与气的关系 天干地支天干地支与脏腑经络的关系 伤寒论六种伤寒组合及对应的药…

一款轻量级的通信协议---MQTT (内含Linux环境搭建)

目录 MQTT MQTT的关键特点&#xff1a; 应用场景 Linux环境搭建&#xff1a; 1. 安装mosquitto 2. Linux下客户端进行通信 3. PC端和Linux下进行通信 安装MQTT. fx 4. MQTT.fx的使用 1. 点击连接 ​编辑 2. 连接成功 3. 订阅主题或者给别的主题发送消息 遇到的问…

(项目实战)聚合支付系统开发环境搭建-基于VMware17安装Centos7.9

1 开发环境介绍 dtpay聚合支付系统和ecard预付卡系统&#xff0c;服务端部署在Linux环境。后续的开发环境&#xff0c;生产环境都是基于Linux进行搭建&#xff0c;系统使用到的相关中间件(RocketMQ,Redis&#xff0c;Nginx等)&#xff0c;配置中心Nacos&#xff0c;数据库MySQ…

CSS实现动画

CSS实现动画主要有三种方式&#xff1a;transition&#xff0c;transform&#xff0c;和animation1。以下是一些详细的逻辑&#xff0c;实例和注意事项&#xff1a; Transition&#xff1a;transition可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。例如&#xff…

OpenCV学习之cv2.getGaussianKernel函数

OpenCV学习之cv2.getGaussianKernel函数 一、简介 cv2.getGaussianKernel 是 OpenCV 中用于生成一维高斯核&#xff08;Gaussian Kernel&#xff09;的函数。 高斯核在图像处理中主要用于图像的平滑处理、模糊处理以及作为卷积核来进行各种图像操作。生成的高斯核可以用于卷…

Emp.dll文件丢失?理解Emp.dll重要性与处理常见问题

在繁多的动态链接库&#xff08;DLL&#xff09;文件中&#xff0c;emp.dll 可能不是最广为人知的&#xff0c;但在特定软件或环境中&#xff0c;它扮演着关键角色。本文旨在深入探讨 emp.dll 的功能、重要性以及面对常见问题时的解决策略。 什么是 emp.dll&#xff1f; Emp.d…

python 第6册 辅助excel 002 批量创建非空白的 Excel 文件

---用教授的方式学习 此案例主要通过使用 while 循环以及 openpyxl. load_workbook()方法和 Workbook 的 save()方法&#xff0c;从而实现在当前目录中根据已经存在的Excel 文件批量创建多个非空白的Excel 文件。当运行此案例的Python 代码&#xff08;A002.py 文件&#xff0…

Java面试题:解释函数式编程的概念,并讨论在Java中实现函数式编程的方法

函数式编程&#xff08;Functional Programming&#xff0c;FP&#xff09;是一种编程范式&#xff0c;它将计算视为数学函数的评估&#xff0c;避免使用可变状态和副作用。函数式编程的核心理念包括&#xff1a; 函数是第一类公民&#xff1a;函数可以作为参数传递给其他函数…

【STM32】在标准库中使用定时器

1.TIM简介 STM32F407系列控制器有2个高级控制定时器、10个通用定时器和2个基本定时器。通常情况下&#xff0c;先看定时器挂在哪个总线上APB1或者APB2&#xff0c;然后定时器时钟需要在此基础上乘以2。 2.标准库实现定时中断 #ifndef __BSP_TIMER_H #define __BSP_TIMER_H#if…

Java面试题:讨论Java 8中Lambda表达式的使用,以及它们如何简化代码

Java 8引入的Lambda表达式是对Java语言的一次重要扩展&#xff0c;极大地简化了代码的书写&#xff0c;提升了代码的可读性和可维护性。下面详细讨论Lambda表达式的使用以及它们如何简化代码。 Lambda表达式的使用 Lambda表达式主要用于替代匿名内部类&#xff0c;从而简化代…

2.1 大语言模型的训练过程 —— 《带你自学大语言模型》系列

《带你自学大语言模型》系列部分目录及计划&#xff0c;完整版目录见&#xff1a; 带你自学大语言模型系列 —— 前言 第一部分 走进大语言模型&#xff08;科普向&#xff09; 第一章 走进大语言模型1.1 从图灵机到GPT&#xff0c;人工智能经历了什么&#xff1f;1.2 如何让…

现代信号处理——Introduction

Introduction(引言)&#xff1a; 现代信号处理是研究生阶段要学习的课程之一&#xff0c;学习这门课程的起源来自我的本科期间的数字信号处理的老师&#xff0c;课堂上她格外强调掌握一门技术和自发学习的重要性。因此在数字信号处理的第一轮学习告一段落后&#xff0c;我并未…

【力扣 389】找不同 C++题解(字符串+排序)

给定两个字符串 s 和 t &#xff0c;它们只包含小写字母。 字符串 t 由字符串 s 随机重排&#xff0c;然后在随机位置添加一个字母。 请找出在 t 中被添加的字母。 示例 1&#xff1a; 输入&#xff1a;s “abcd”, t “abcde” 输出&#xff1a;“e” 解释&#xff1a;‘…

【C++多线程】std::condition_variable到底是什么

2024年6月29日&#xff0c;周日下午 std::condition_variable 是C11标准库中用于线程同步的一个设施&#xff0c;它通常与 std::unique_lock 或 std::mutex 结合使用&#xff0c;允许一个线程在某些条件成立之前挂起&#xff08;等待&#xff09;&#xff0c;而另一个线程可以通…

基于MDEV的PCI设备虚拟化DEMO实现

利用周末时间做了一个MDEV虚拟化PCI设备的小试验&#xff0c;简单记录一下&#xff1a; DEMO架构&#xff0c;此图参考了内核文档&#xff1a;Documentation/driver-api/vfio-mediated-device.rst host kernel watchdog pci driver: #include <linux/init.h> #include …