介绍
在前端开发中，页面加载动画是一个非常常见的需求。如果每次都自己写一遍相对来说会比较麻烦，因此可以使用现有的开源库来简化开发。其中一个比较好用的 npm 包就是 page-loading。它提供了一种简便的方式来添加页面加载动画。
安装
page-loading 是一个 npm 包，可以直接使用 npm 进行安装。
npm install page-loading --save
安装完成后，就可以在所在的项目中使用 page-loading 了。
使用
引入
在使用 page-loading 之前，我们需要先将其引入到项目中。在需要使用的地方添加以下代码：
import PageLoading from 'page-loading';
初始化
在页面加载前，我们需要进行初始化。在生命周期函数 componentDidMount 中添加以下代码：
componentDidMount() {
PageLoading.init();
}打开和关闭动画
在需要打开或关闭页面加载动画时，我们需要调用相应的方法。
打开动画
可以调用 PageLoading.start() 方法来打开动画。这个方法可以不传参数，也可以传入一个对象，用于自定义动画的样式。下面是自定义样式的例子：
PageLoading.start({
backgroundColor: '#ff7043',
spinnerColor: '#fff',
spinnerSize: '100px'
});关闭动画
可以调用 PageLoading.done() 方法来关闭动画。这个方法不需要传入参数。下面是一个示例：
setTimeout(() => {
PageLoading.done();
}, 3000);取消动画
如果在页面加载过程中，由于某些原因需要取消加载动画，可以调用 PageLoading.reset() 方法来取消动画。这个方法不需要传入参数。下面是一个示例：
if (someCondition) {
PageLoading.reset();
}示例代码
下面是一个完整的使用示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----------- ---- ---------------
----- ------ ------- --------- -
------------------- -
-------------------
------------- -- -
-------------------
---------------- ----------
------------- -------
------------ -------
---
-- ------
------------- -- -
-------------------
-- ------
-
-------- -
------ ----------- -------------
-
-
------ ------- -------总结
通过本文，我们了解了 npm 包 page-loading 的使用方法。它提供了一种简便的方式来添加页面加载动画。需要注意的是，page-loading 并不是必须的，如果你需要的加载动画比较简单，或者你已经有了自己的加载动画，可以不用使用它。但是，如果你需要一个兼容性好、易用性高的加载动画库，可以考虑使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d581e8991b448e02b2