vue数据未加载完成前显示loading遮罩

目的

在前后端分离项目中，由于页面请求和数据请求并非同步，所以导致页面和数据不能同时渲染，因此在实际过程中往往采用SSR即服务端渲染或者请求数据时采用遮罩(加载中)的方式提升用户体验。
下面我将使用loading遮罩的方式实现更加友好的数据加载

参考

https://codepen.io/bartezic/pen/ByqeNq

效果

代码

在App.vue中添加一个<div>

<div><div id="appLoading"><div class='lmask'></div></div><div id="app"><router-view v-if="isRouterAlive"/></div></div>

以下是CSS样式


.lmask {position: absolute;height: 100%;width: 100%;background-color: #000;bottom: 0;left: 0;right: 0;top: 0;z-index: 9999;;opacity: 0.4;&.fixed {position: fixed;}&:before {content: '';background-color: rgba(0,0,0,0);border: 5px solid rgba(0,183,229,0.9);opacity: .9;border-right: 5px solid rgba(0,0,0,0);border-left: 5px solid rgba(0,0,0,0);border-radius: 50px;box-shadow: 0 0 35px #2187e7;width: 50px;height: 50px;-moz-animation: spinPulse 1s infinite ease-in-out;-webkit-animation: spinPulse 1s infinite linear;margin: -25px 0 0 -25px;position: absolute;top: 50%;left: 50%;}&:after {content: '';background-color: rgba(0,0,0,0);border: 5px solid rgba(0,183,229,0.9);opacity: .9;border-left: 5px solid rgba(0,0,0,0);border-right: 5px solid rgba(0,0,0,0);border-radius: 50px;box-shadow: 0 0 15px #2187e7;width: 30px;height: 30px;-moz-animation: spinoffPulse 1s infinite linear;-webkit-animation: spinoffPulse 1s infinite linear;margin: -15px 0 0 -15px;position: absolute;top: 50%;left: 50%;}
}@-moz-keyframes spinPulse {0% {-moz-transform:rotate(160deg);opacity: 0;box-shadow: 0 0 1px #2187e7;}50% {-moz-transform: rotate(145deg);opacity: 1;}100% {-moz-transform: rotate(-320deg);opacity: 0;}
}
@-moz-keyframes spinoffPulse {0% {-moz-transform: rotate(0deg);}100% {-moz-transform: rotate(360deg);}
}
@-webkit-keyframes spinPulse {0% {-webkit-transform: rotate(160deg);opacity: 0;box-shadow: 0 0 1px #2187e7;}50% {-webkit-transform: rotate(145deg);opacity: 1;}100% {-webkit-transform: rotate(-320deg);opacity: 0;}
}
@-webkit-keyframes spinoffPulse {0% {-webkit-transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);}
}

此时遮罩层显示，我们需要当App加载完成后取消遮罩层，即display: none

 document.getElementById('app').style.display = 'block';document.getElementById('appLoading').style.display = 'none';

如何在我们需要的地方调用呢
我采用的方法是写一个loading和loaded函数，在分别在请求数据前和请求数据完成后调用，因为该功能可能会重复的使用，所以将其封装成为一个可以复用的模块
在App.vue中写两个方法：

 provide() {return {loading: this.loading,loaded: this.loaded}},methods: {loading() {document.getElementById('app').style.display = 'block';document.getElementById('appLoading').style.display = 'block';},loaded() {document.getElementById('app').style.display = 'block';document.getElementById('appLoading').style.display = 'none';}}

上面将这两个函数给暴露了出来，在我们需要的地方inject就好
5. 在需要使用的地方调用

export default {inject: ['loading', 'loaded'],name: "index",created() {this.getData()},methods: {getData() {this.loading()getUserInfo().then(res => {this.userInfo = res.data}).finally(() => {this.loaded()})}}
}

完成

总结

实现思路非常简单，就是请求数据之前将遮罩显示，加载数据完成后将遮罩隐藏，解决这个问题肯定有非常多的办法，如果你有更好的方法，请在评论区留言。

vue数据未加载完成前显示loading遮罩相关推荐

loading窗口动画 web_在页面未加载完之前显示loading动画
在页面未加载完之前显示loading动画 loading动画代码demo use-pseudo-class .loading{ width: 100px; height: 100px; border: ...
图片在未加载完成前显示“加载中...”
// 判断浏览器 var Browser = new Object(); Browser.userAgent = window.navigator.userAgent.toLowerCase(); ...
html5 载入网页显示,页面加载完之前显示Loading
1.第一种方式 HTML loading... CSS .loader { position: fixed; left: 50%; top: 50%; margin: -0.2em 0 0 -0.2e ...
vue图片加载完成前增加loading效果
这次给大家带来vue图片加载完成前增加loading效果,vue图片加载完成前增加loading效果的注意事项有哪些,下面就是实战案例,一起来看一下. 如下所示: 1 2 3 4 5 6 7 8 9 ...
微信小程序image加载成功前显示默认占位图
在微信小程序中,我们使用Image组件来展示图片,图片源可以是本地资源,也可以是服务器资源.但是为了内容的动态展示,我们绝大多数情况下,会使用服务器资源来展现作为image的图片源.既然是服务器资源, ...
一个页面多个ajax统一loading,页面有多个向后台发送的请求加载过程中显示loading，加载完成loading消失...
//全局加载动画 var ajax_set = function() { var count = 0; var callback = null; return { ajax: function(con ...
js在html之前加载,js加载前显示loading（页面加载前）
工作中遇到,需要加loading.1.用jquery的load方法读取页面,页面读取完成前显示loading.2.首页js等加载过慢,页面加载完成前显示loading. (1).jquery .loa ...
页面还未加载完成显示loading
页面未加载完成,显示loading的图标 html代码 <div id="loading"><i></i> </div> css ...
数据懒加载和图片懒加载
数据懒加载是项目优化的一种类型主要是监听, 监听的 DOM 元素是否有进入可视区进入了可视区就可以做一些事情, 如: 发送请求, 返回出数据离开可视区停止对 DOM 元素的监听首先我们使用的是 ...
Ionic+Angular+Express实现前后端交互使用HttpClient发送get请求数据并加载显示(附代码下载)
场景 Ionic介绍以及搭建环境.新建和运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106308166 在上面搭建起 ...

vue数据未加载完成前显示loading遮罩

目的

参考

效果

代码

总结

vue数据未加载完成前显示loading遮罩相关推荐

最新文章

热门文章