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 相关文章推荐
javascript 命名规则 变量命名规则
Feb 25 Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 Javascript
js中数组Array的一些常用方法总结
Aug 12 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
js实现将选中值累加到文本框的方法
Aug 12 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
深入理解(function(){... })();
Aug 16 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 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微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
Javascript学习笔记1 数据类型
2010/01/11 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
Python编写登陆接口的方法
2017/07/10 Python
Python应用库大全总结
2018/05/30 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
经济与贸易专业应届生求职信
2013/11/19 职场文书
便利店的创业计划书
2014/01/15 职场文书
创先争优制度
2014/01/21 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
金秋助学感谢信
2015/01/21 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL
vue里使用create, mounted调用方法
2022/04/26 Vue.js