在前端开发中，我们经常会遇到加载页面较慢的情况，为了提升用户体验，我们可以使用一些加载进度条来提示用户正在加载页面。这里介绍一个npm包 - next-page-loading-bar，它提供了一种简单易用的方式来添加页面加载进度条。
安装
npm install next-page-loading-bar --save
使用方式
引入
在需要使用的组件中引入 next-page-loading-bar 依赖。
import NextPageLoadingBar from 'next-page-loading-bar';
初始化
初始化 NextPageLoadingBar。我们通常要在 app.js 或者页面组件中进行初始化。
import NextPageLoadingBar from 'next-page-loading-bar'; const nplb = new NextPageLoadingBar(); // nplb.start(); // 开始进度 // nplb.done(); // 完成进度
初始化完成后我们可以通过 nplb 实例对进度条进行操作。
开始进度
当页面开始加载时，我们可以调用 start 方法来启动进度条。
nplb.start();
完成进度
当页面加载完成时，我们可以调用 done 方法来结束进度条。
nplb.done();
示例代码
-- -------------------- ---- -------
------ ------------------ ---- ------------------------
----- ---- - --- ---------------------
-------- ---------- -
-------------
------------- -- -
------------ -- --------
-- ------
-以上代码演示了如何在页面加载时使用 next-page-loading-bar。通过 nplb.start() 开启进度条，模拟耗时2秒的加载过程后通过 nplb.done() 结束进度条。
结语
next-page-loading-bar 提供了一种简便的方式来在页面加载时添加进度条，从而提升用户体验。使用 NextPageLoadingBar 实例来控制进度条操作和样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600565fd81e8991b448e1e9d