vue进入页面加载数据缓慢实现loading提示

比如进入一个页面数据加载缓慢的页面后，等待后端返回数据显示在页面时给个loading的样式，像下面这样：

代码实现如下：

 getStudent() {// 开始加载let loading = this.$loading({lock: true,//lock的修改符--默认是falsetext: "拼命加载中，请稍候...",//显示在加载图标下方的加载文案background: "rgba(0,0,0,0.8)",//遮罩层颜色spinner: "el-icon-loading",//自定义加载图标类名});getStudent().then(res => {if (res.code === 200) {this.user = res.data;// 获取数据显示成功后，关闭loadingloading.close();} else {this.$message.error("错误！");}});}

参数列表说明如下（详细可以观看elementUI官网）：

参数	说明	类型	默认值
target	Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 document.querySelector以获取到对应 DOM 节点	object/string	document.body
body	同 v-loading 指令中的 body 修饰符	boolean	false
fullscreen	同 v-loading 指令中的 fullscreen 修饰符	boolean	true
lock	同 v-loading 指令中的 lock 修饰符	boolean	false
text	显示在加载图标下方的加载文案	string	—
spinner	自定义加载图标类名	string	—
background	自定义加载图标类名	string	—
customClass	自定义加载图标类名	string	—

vue进入页面加载数据缓慢实现loading提示相关推荐

vue 判断页面加载完成_vue之骨架屏踩坑之路
vue的首屏优化方式有很多种骨架屏就是其中之一作为一个前端开发用户体验感是很重要的关于页面的loading状态的展示,目前主流的主要有loading图和进度条两种现今使用骨架屏的也越来越多 ...
在Vue中异步加载数据渲染到Dom
在Vue中异步加载数据渲染到Dom 问题 <div v-for="o in resmessage" :key="o" class="text i ...
html页面展示大括号,vue 防止页面加载时看到花括号的解决操作
如下所示: [v-cloak]{ display:none } v-cloak v-text v-html v-cloak用于大段 v-text用于单个标签 v-html用于带有标签的处理补充知识: ...
html5 载入网页显示,页面加载完之前显示Loading
1.第一种方式 HTML loading... CSS .loader { position: fixed; left: 50%; top: 50%; margin: -0.2em 0 0 -0.2e ...
vue 判断页面加载完成_vue项目搭建及总结
一.vue的两种安装方式 (1)直接在html中引入vue.js (2)通过vue+nodeJS搭建我们采用的是第二种方式二.vue和nodeJS的关系 (1)nodeJS不是一个js框架,是一个 ...
vue 判断页面加载完成_Vue实战040：nprogress页面加载进度条
前言很多时候在访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们希望能知道网页加载的进度,这样我们就能做到心中有数是否继续等待页面加载.这个功能我 ...
微信小程序下拉刷新列表onPullDownRefresh；微信小程序上划加载列表onReachBottom；uni-app微信小程序下拉加载数据；uni-app微信小程序上划页面加载数据
需求:微信小程序列表加载有两种方式,分别是按住页面下拉加载数据数据(触发onPullDownRefresh)和直接上划滚动页面到底部加载数据(触发onReachBottom函数). 本文主要是使用上划 ...
h5首页加载慢_页面加载速度缓慢时，如何优化？
提高页面加载速度,优化方法: 1.使用免费 cdn 加载第三方资源 2.合并压缩js,css,减少请求次数以及减少流量的消耗 3.代码优化: HTML头部的JavaScript和写在HTML标签中的S ...
loading页面加载(等待页面加载完毕再隐藏loading页面)
1.设计一个装载Loading页面的div 此处设置的height为100vh,vh单位表示浏览器的可视高度百分比,100vh表示浏览器高度的100%,如果是全屏Loading,则该div需要排在bo ...
vue 判断页面加载完成_在Vue+webpack中详细讲解基础配置
这篇文章主要介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下. 最近在学习webpack,跟着课程一个单页面应用,在这里记录一下. 这个部分主要讲了如何配置webpack的环境,以及 ...

vue进入页面加载数据缓慢实现loading提示

vue进入页面加载数据缓慢实现loading提示相关推荐

最新文章

热门文章