vue页面加载时的进度条功能(实例代码)


Posted in Javascript onJanuary 13, 2020

先看一张图

vue页面加载时的进度条功能(实例代码)

如果我们的程序每次页面切换时,顶部也有一个进度条,那会让用户体验提升很大的。

npropgress插件

github地址

简单用法 - Vue 项目为例(详细配置,点击上面的github地址查看文档)

最简单的使用方式:vue项目的每次路由切换时,都加载进度条

安装

npm install --save nprogress

引入

在路由配置文件中引入,写到路由加载前和加载后的两个钩子函数中

// 引入
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
// 进度条配置项这样写
NProgress.configure({
 showSpinner: false
});
// 路由跳转前钩子函数中 - 执行进度条开始加载
router.beforeEach((to, from, next) => {
 NProgress.start();
});
// 路由跳转后钩子函数中 - 执行进度条加载结束
router.afterEach(() => {
 NProgress.done();
});

如果是 cdn 引入的话,如下

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

设置进度条颜色

如果是一般的 vue 项目,把样式放到一个css文件中,在项目主文件main.js中引入,下面是 css 样式

#nprogress .bar {
 background: #00CC00 !important; //自定义颜色
}

配置项

手动控制进度条递增,参数范围是0 - 1,不传参数的话,每次调用都会随机递增,但永远不会到达 100% ,除非调用NProgress.done();

// 调用之前如果进度条的状态 50%
NProgress.inc(0.2);
// 调用之后 70%

进度条加载完成

带参数true:即使没有调用NProgress.start(),也会显示并执行进度条从 0% - 100% 的状态,然后消失。
不带参数:如果没有调用NProgress.start(),那么此命令不会执行任何操作。

NProgress.done(true);

启动进度条时的最小百分比(默认为 0.08)

NProgress.configure({
 minimum: 0.3
});

可以使用模板更改标记。要保持进度条正常工作,要在其中保留一个role='bar'元素,参考默认模板。

// 默认模板
NProgress.configure({
 template: "<div class='....'>...</div>"
});

// 举例
NProgress.configure({
 template: "<div class='other-instance'><div role='bar'>更改标记</div></div>"
})

使用 easing 和 speed 调整动画设置,ease可传递CSS3缓冲动画字符串(如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier),speed为动画速度(单位ms)。默认分别为 ease 200

NProgress.configure({
 easing: 'ease',
 speed: 200
});

关闭自动递增行为

NProgress.configure({
 trickle: false
});

调整递增的频率,单位为毫秒

NProgress.configure({
 trickleSpeed: 200
});

关闭微调器,默认为开启状态(上图中右上角的那个圆圈加载图标)

NProgress.configure({
 showSpinner: false,
});

更改父容器

NProgress.configure({
 parent:'#container'
});

总结

以上所述是小编给大家介绍的vue页面加载时的进度条功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
Js获取当前日期时间及格式化代码
Sep 17 Javascript
JQuery学习总结【二】
Dec 01 Javascript
js querySelector() 使用方法
Dec 21 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 #Javascript
js实现列表向上无限滚动
Jan 13 #Javascript
vue 组件销毁并重置的实现
Jan 13 #Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 #Javascript
微信小程序聊天功能的示例代码
Jan 13 #Javascript
js实现适配移动端的拖动效果
Jan 13 #Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 #Javascript
You might like
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
php自定义时间转换函数示例
2016/12/07 PHP
基于Jquery的简单图片切换效果
2011/01/06 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
Prototype框架详解
2015/11/25 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
浅谈python中的变量默认是什么类型
2016/09/11 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
python通过http下载文件的方法详解
2019/07/26 Python
Python 图片处理库exifread详解
2021/02/25 Python
新闻专业本科生的自我评价分享
2013/11/20 职场文书
人力资源作业细则
2014/03/03 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
一帮一活动总结
2014/05/08 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
2016春节慰问信范文
2015/03/25 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
实例讲解Python中sys.argv[]的用法
2021/06/03 Python