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 循环读取JSON数据的代码
Jul 17 Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
jquery动态添加option示例
Dec 30 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 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
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
javascript制作2048游戏
2015/03/30 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
Python中使用SAX解析xml实例
2014/11/21 Python
pymysql 开启调试模式的实现
2019/09/24 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
文明学生事迹材料
2014/01/29 职场文书
安全生产责任书范本
2014/04/15 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
优秀教师个人材料
2014/12/15 职场文书
教学督导岗位职责
2015/04/10 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书