在 Web 开发中，我们经常需要实现 Loading 效果，来提示用户正在加载页面或数据。而 Next.js 是一种流行的 React 服务端渲染框架，也提供了多种实现 Loading 效果的方式。本文将介绍其中的几种方法。
1. 使用官方插件：nprogress
Next.js 官方推荐使用插件 nprogress 来实现 Loading 效果。它提供了轻量级的进度条，使用起来非常简单。
第一步，安装插件：
yarn add nprogress第二步，在 _app.js 文件中引入它，并在 componentDidMount 和 componentWillUnmount 方法中调用：
-- -------------------- ---- ------- ------ ----- ---- ------- ------ --- ---- ---------- ------ ------ ---- ------------- ------ --------- ---- ----------- ------ ------------------------- ------------------------------------ -- -- ------------------ --------------------------------------- -- -- ----------------- ------------------------------------ -- -- ----------------- ----- ----- ------- --- - -- --- -- - ------ ------- -----展开代码
这样就可以在路由切换时看到一个滚动条了。
2. 使用 CSS3 动画
除了引用第三方库，你也可以使用 CSS3 动画来实现 Loading 效果。以下代码实现了一个简单的加载圆圈：
-- -------------------- ---- ------- ---------- ------- - ---- - ---------- ------------- - -- - ---------- --------------- - - -------- - -------- ------------- ------ ----- ------- ----- ------- ------- ----- ------------ ----------------- -------- -------------- ---- ---------- ------- -- --------- -展开代码
然后在你的页面中使用它：
import React from 'react' const Loading = () => ( <div className="loading"></div> ) export default Loading
使用了这个组件后，你可以在需要的时候使用 display: none; 来隐藏它。
3. 使用自定义组件
如果你需要更复杂的 Loading 效果，你可以自定义一个组件。这里给出一个例子：一个带有文本的加载按钮。
-- -------------------- ---- ------- ------ ------ - --------- --------- - ---- ------- ------ ---------- ---- ------------ ------ ------ ---- ----------------------------- ----- ------------- - -- -------- -------- --------- ---------- ---- -- -- - ----- ------ -------- - ---------------- ------------ -- - ----------------- -- ----------- ----- ----------- - ----- -- - -- -------- -- --------- - ------------- - -- ----- --------------- - --------------------- -------------- - ------------------ -------- -- ----- ------------------ ------- --- ------ - ------- --------------------------- --------------------- ------------------ -- -------- - ---- --------------------------- ---- --------------------------------- ---- --------------------------------- ---- --------------------------------- ------ ------------- --------- -- -- ------ ------- --------------展开代码
CSS 文件 loading-button.module.css：
-- -------------------- ---- ------- ------- - --------- --------- -------- ------------- ------- ----- -------------- ---- ----------------- -------- ------ ------ -------- ---- ----- ---------- ----- ------- -------- ----------- ---------------- ----- - --------- - -------- -- - --------- - -------- -- ------------ ----- ----------------- ----- - -------- - --------- --------- ------ ----- ------- ----- ---- ---- ----- ---- ---------- --------------- ------ - --------- --------- -------- - ------ ----- ------- ----- -------------- ---- ----------------- ------ -------- ---- --------- --------- ---- -- ---------- ------ ---- -------- ------------ - -------- - ---------------- ------ - -------- - ---------------- ------ - ---------- ------ - -- - ---------- -------------- - ---- - ---------- ------------------ - -展开代码
使用这个组件：
-- -------------------- ---- ------- ------ ------ - -------- - ---- ------- ------ ------------- ---- ------------------- ----- ----------- - -- -- - ----- --------- ----------- - ---------------- ----- ----------- - -- -- - ----------------- ------------- -- - ------------------ -- ------ -- ------ - ----- -------------- --------------------- ---------- ----- ----------------- -- ------ -- -- ------ ------- ------------展开代码
总结
Next.js 提供了多种实现 Loading 效果的方式，它们各有优缺点，可以根据具体情况来选择使用。同时也可以结合你自己的设计和业务需求，自定义 Loading 组件。
希望这篇文章对你有所启发，可以帮助你实现自己的 Loading 效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6454a088968c7c53b08726c0
