PocketLibs（3）—— 进度条 NProgress

crossoverJie 发布于2019-08-22 16:02 / 2913人阅读

摘要：可以指定一个具体值，而非增量，在之间。这是因为，使进度增加超过时，会变成，之后又从重新开始。所以，当为时，我们停止调用。

依赖jQuery。

import nprogress from "nprogress"
import "nprogress/nprogress.css"

$("#btn-loading").on("click", function () {
    nprogress.start()
    setTimeout(() => {
        nprogress.done()
    }, 3000);
})

nprogress.start()开始加载，nprogress.done()加载完成

挂载目标

nprogress.configure({ parent: "#app" })改变进度条挂载的目标，默认是

nprogress.configure({ parent: "#app" })
$("#btn-loading").on("click", function () {
    nprogress.start()
    setTimeout(() => {
        nprogress.done()
    }, 3000);
})

#app {
    width: 350px;
    border: 1px solid gray;
    padding: 5px;
}

进度条动画增量

nprogress.inc()随机生成一个进度条的增量，nprogress.inc(n)指定一个具体增量，n在0~1之间。
nprogress.set(n)可以指定一个具体值，而非增量，n在0~1之间。

nprogress.configure({ parent: "#app" })
$("#btn-loading").on("click", function () {
    nprogress.start()
    var i = 0;
    //使用inc()
    var timer = setInterval(() => {
        if(nprogress.status){
            $("#inc_counter").text(i++)
            $("#status_counter").text(nprogress.status)
            nprogress.inc()
        }else{
            clearInterval(timer)
        }
    }, 500);
    setTimeout(() => {
        nprogress.done()
    }, 3000);
})


    
    
    
        invoke inc times ：
        
        
 noprogress status ：

这里设置了一个定时器，每过0.5秒调用一次inc()，生成随机增量，这里有个问题，如果少了if...else...，会变成如下这个效果。

这是因为，inc()使进度增加超过1时，nprogress.status会变成null，之后又从0重新开始。所以，当nprogress.status为null时，我们停止调用inc()。

如果设置一个指定增量，不会有以上问题。

改变颜色

如果要改变默认颜色，就要在nprogress.css文件中修改。
我复制一份nprogress.css，然后在拷贝中修改颜色，再引用这份拷贝。

// import "nprogress/nprogress.css"
import "./nprogress.scss"

//......

/*nprogress.scss*/
$color:#FF5983;

/*原先颜色都替换成$color*/
/* ... */

其他

这些配置都是在NProgress.configure(options)中的options中配置

showSpinner：true/false 是否显示螺旋加载（就是右上角那个圈圈）
trickle：默认情况就是不使用inc()也会有默认增量，这个选项决定是否关闭这个默认增量
trickleSpeed：默认情况下进度条增加的速度
minimum：进度条初始值
easing、speed：进度条增加时有个动画效果，这两个选项设置动画的贝塞尔曲线及其增加速度，如：

nprogress.configure({ easing: "cubic-bezier", speed: 200 })

template: 这个进度是被包在一个以下这个role="bar"这个div中的，我们可以通过这个选项重写这个div，以彻底改变默认的内部构造。暂时用不到。

云服务器服务器托管进度条上传进度条网站进度条带进度条

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93983.html

路由

摘要：由命名路由与子路由构成整体结构，我们用它构建如下页面。以下两张图说明路由和子路由是如何工作的。继续修改好友信息的路由部分添加好友信息为组件添加动态路由为动态路由添加为路径参数添加数据下发为组件添加，并使用它。不使用vue-router的情况代码官方给出下面的例子在不使用vue-router的情况下来实现一个路由。该示例结合了H5历史管理API、单文件组件、JS模块相关内容来实现路由...

Aklman 2019-08-22 16:09 评论0 收藏0
记一次开源学习--D2Admin 人人企业版

摘要：前言上个月月底开源组开源了使用适配人人企业版专业版的前端工程具体详情见人人企业版适配发布。当然，也督促自己产出一篇相关的文章，来记录这次有趣的学习之旅。 Created by huqi at 2019-5-5 13:01:14 Updated by huqi at 2019-5-20 15:57:37 前言上个月月底@D2开源组开源了使用 D2Admin 适配人人企业版(专业版) 的...

notebin 2019-05-21 19:46 评论0 收藏0
vue+node+mongodb 搭建一个完整博客

摘要：开发一个完整博客流程前言前段时间刚把自己的个人网站写完，于是这段时间因为事情不是太多，便整理了一下，写了个简易版的博客系统服务端用的是框架进行开发技术栈目录结构讲解的配置文件放置代码文件项目参数配置的文件日志打印文件项目依赖模块 Vue + Node + Mongodb 开发一个完整博客流程前言前段时间刚把自己的个人网站写完，于是这段时间因为事情不是太多，便整理了一下，写了个简易...

Miracle_lihb 2019-06-26 17:32 评论0 收藏0
Web前端常用插件

摘要：弹窗视频嵌入插件幻灯片图片切换手机端响应式日期控件上传图片控件校验控件分页静态分页动态分页相册效果控件多级下拉图片延迟加载或响应式管理模板插件库大转盘九宫格效果整屏滚动滚动效果用于移动项目的光滑菜单浏览器端格式化工具千手观音弹窗 1.blockUI2.overlay 3.sweetAlert 视频 1.jwplayer2.video.js html53.swfobject Flas...

quietin 2019-08-21 10:31 评论0 收藏0