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

目录

1,滚动条复位

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

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

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 函数,并在目标路由组件中执行即可。

js 复制代码
function useScroll(pathname) {
    useEffect(() => {
        resetScroll();
    }, [pathname]);
}

App.jsx

js 复制代码
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

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() 即可。

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

以上。

相关推荐
程序员爱技术1 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会2 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子2 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、2 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜2 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师2 小时前
CSS的三个重点
前端·css
耶啵奶膘3 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^5 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie5 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic6 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js