React中使用顶部进度条(Pace.js)

Pace.js 官网地址 : http://github.hubspot.com/pace/

Pace.js 最大的好处就是可以实时监听页面数据的加在情况,并且可以自定义加载条的样式。

Pace.js 的api :

Pace.start:开始显示进度条,如果你不是使用AMD或者Browserify来加载模块的话,这个会默认执行。
Pace.restart:进度条重新加载以及显示。
Pace.stop:隐藏进度条以及停止加载。
Pace.track:监测一个或者多个请求任务。
Pace.ignore:忽略一个或者多个请求任务。

Pace.js 的使用:

  1. 先下载Pace.js 包 , 复制你想要的主题的css 文件到你的项目中。
  2. 把css文件 和 js文件 引入到index.html 中。
  <head>
      <link rel="stylesheet" href="./pace-theme-center-simple.css" />
  </head>
<body>
   <script src="https://cdn.bootcss.com/pace/1.0.2/pace.js"></script>
   <script src="../pace.js"></script>
</body>

猜你喜欢

转载自blog.csdn.net/wu_shuxuan/article/details/79614149