nprogress页面加载进度条
前言
很多时候在访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们希望能知道网页加载的进度,这样我们就能做到心中有数是否继续等待页面加载。这个功能我们可以依靠nprogress来实现,它是轻量级的进度条组件,使用简便,可以很方便集成到应用中来。
安装nprogress
直接在项目中执行安装命令:npm install --save nprogress
nprogress方法
NProgress.start() // 进度条开始 NProgress.set() // 将进度设置到具体的百分比位置,取值范围是0到1.0 NProgress.inc() // 如果少量增加进度,进度将永远不会得到100% NProgress.done() // 进度条结束消失 NProgress.configure() // 进度条参数配置
全局引入nprogress
在main.js中引入nprogress插件和样式,
import NProgress from ‘nprogress' // nprogress插件 import ‘nprogress/nprogress.css' // nprogress样式
配置nprogress
在NProgress.configure({})中我们可以对nprogress进行适当的配置,showSpinner 为 false(禁用进度环)、trickle 为 false(关闭进度条步进)、trickleRate (每次步进增长多少)、trickleSpeed (步进间隔,单位毫秒ms)、ease(动画方向)、speed (动画速度,单位毫秒ms)、minimum (最小百分比)等等。
NProgress.configure({ showSpinner: false }) //我这里只关闭进度环
Vuerouter路由钩子
在添加nprogress之前我们需要先了解Vuerouter的beforeEach与afterEach钩子函数,这是在路由跳转的时候对路由进行一些权限判断或者其他操作时定义的处理函数,Vue.beforeEach是在跳转之前执行,Vue.afterEach是在跳转之后执行判断的。
Vue.beforeEach(function(to,form,next){})函数有三个参数,Vue.afterEach(function(to,form))函数有两个参数:
to:即将进入的路由对象
from:当前导航即将离开的路由对象
next:调用该方法,进入下一个钩子函数,next(false):则中断当前的导航。
在路由中添加nprogress
在main.js中全局钩子函数,在路由跳转前用NProgress.start()标记下进度条开始,在路由跳转后用NProgress.done()标记下结束,这样在路由跳转的时候就可以在页面顶部看到一个progress bar进度条了
import Vue from 'vue' import App from './App.vue' import router from '@/router/index.js' import store from './store' import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import '@/assets/icons/index.js' import NProgress from 'nprogress' import 'nprogress/nprogress.css' Vue.use(Element) Vue.config.productionTip = false NProgress.configure({ showSpinner: false }) router.beforeEach((to, from, next) => { NProgress.start() next() }) router.afterEach(() => { NProgress.done() }) new Vue({ router, store, render: h => h(App) }).$mount('#app')
在请求中添加nprogress
如果你希望每次发送请求的时候也出现进度条的话可以在axios封装中的路由拦截中添加nprogress
// 请求拦截器(请求发出前处理一些请求) axios.interceptors.request.use( NProgress.start() }) // 响应拦截器(处理响应数据) axios.interceptors.response.use( NProgress.done() )
为了让结构更滑清晰简洁些,我们重新整理下代码,即然nprogress主要是用在路由跳转上,这里我将nprogress归纳放入router中,切记实例化router之后调用Vuerouter的beforeEach与afterEach钩子函数生效。
import Vue from 'vue' import Router from 'vue-router' import routers from './routers' import NProgress from 'nprogress' import 'nprogress/nprogress.css' NProgress.configure({ showSpinner: false }) Vue.use(Router) const router = new Router({ mode: 'history', routes: routers }) export default router router.beforeEach((to, from, next) => { NProgress.start() next() }) router.afterEach(() => { NProgress.done() })
修改nprogress样式
在app.vue中添加如下样式即可修改nprogress样式,记得添加 !important来覆盖原有样式
#nprogress .bar { background: #66B1FF !important; // 自定义颜色 height: 20px !important; // 自定义高度 }
参考 https://www.toutiao.com/i6718992880599302659/?group_id=6718992880599302659
到此这篇关于Vue中nprogress页面加载进度条的方法实现的文章就介绍到这了,更多相关Vue nprogress加载进度条内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库!
本文向大家介绍vue使用nprogress加载路由进度条的方法,包括了vue使用nprogress加载路由进度条的方法的使用技巧和注意事项,需要的朋友参考一下 1、效果图 2、安装 基本用法 3、在路由中使用 PS:下面看下Vue使用NProgress的方法 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ githu
本文向大家介绍vue配置nprogress实现页面顶部进度条,包括了vue配置nprogress实现页面顶部进度条的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了vue配置nprogress实现页面顶部进度条的具体代码,供大家参考,具体内容如下 1. 安装 2. 在main.js中导入 源码~~~~~~方便你复制 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持
本文向大家介绍Vue使用NProgress进度条的方法,包括了Vue使用NProgress进度条的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Vue使用NProgress进度条的具体代码,供大家参考,具体内容如下 1、安装 2、在router.js中使用 3、nprogress的z-index 假如你的header比nprogress的高,可能看不见进度条,可以采用这个办法实
本文向大家介绍vue 页面加载进度条组件实例,包括了vue 页面加载进度条组件实例的使用技巧和注意事项,需要的朋友参考一下 页面加载进度条最初我是在youtube上看到的,后面几乎在各大网站上都能见到它的身影,可以让用户在加载页面的时候不会对着完全空白的页面发呆,提升用户体验 但是从开发角度讲,这种进度条在真实性上确实很难把握,因为在逻辑代码加载完成之前,我们都不能统计到进度,而逻辑代码自身的进度
本文向大家介绍vue页面加载时的进度条功能(实例代码),包括了vue页面加载时的进度条功能(实例代码)的使用技巧和注意事项,需要的朋友参考一下 先看一张图 如果我们的程序每次页面切换时,顶部也有一个进度条,那会让用户体验提升很大的。 npropgress插件 github地址 简单用法 - Vue 项目为例(详细配置,点击上面的github地址查看文档) 最简单的使用方式:vue项目的每次路由切换
本文向大家介绍Ajax 实现加载进度条,包括了Ajax 实现加载进度条的使用技巧和注意事项,需要的朋友参考一下 ajax beforeSend: 先说说这个 beforeSend, 在请求发送前执行 比如 可以判断用户有没有登录 ,如果没有登录就停止请求 并提示。 $.ajax有一个参数是complete:function(){} 是在 请求完成之后执行的 ,配合beforeSend可以用来展示进
本文向大家介绍Android仿微信加载H5页面进度条,包括了Android仿微信加载H5页面进度条的使用技巧和注意事项,需要的朋友参考一下 前言 Android中WebView打卡前端页面时受到网路环境,页面内容大小的影响有时候会让用户等待很久。显示一个加载进度条可以提升很大的体验。微信内访问H5页面加载效果不错,效仿着写了一个。 1.实现 1-1.自定义类继承WebView类 看下设置的加载进度
本文向大家介绍Android中WebView加载网页设置进度条,包括了Android中WebView加载网页设置进度条的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Android中WebView加载网页设置进度条的具体代码,供大家参考,具体内容如下 效果: xml: pg.xml Java文件: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。