vue项目未加载完成前显示loading...
场景：vue项目加载时，由于各种原因 可能会白屏一会再显示页面解决方法：在index.html里面加入loading的元素，让loading元素显示，让app元素隐藏// index.html<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-
·
场景：vue项目加载时，由于各种原因 可能会白屏一会再显示页面
解决方法：在index.html里面加入loading的元素，让loading元素显示，让app元素隐藏
// index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="<%= BASE_URL %>styles/base.css">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
<div id="mainLoading">
<div class="ddr ddr1"></div>
<div class="ddr ddr2"></div>
<div class="ddr ddr3"></div>
<div class="ddr ddr4"></div>
<div class="ddr ddr5"></div>
</div>
<div id="app"></div>
</body>
// loading样式 public > styles > base.css
#mainLoading {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#mainLoading .ddr {
width: 8px;
height: 100px;
float: left;
margin: 2px;
background-color: #4890FF;
animation: loading 1s infinite ease-in-out; /*animation：动画名称 持续时间 动画速度曲线 延迟 执行多少次 是否正反方向轮流播放*/
}
#mainLoading .ddr2 {
animation-delay: -0.9s; /*定义开始执行的地方，负号表示直接从第900ms开始执行*/
}
#mainLoading .ddr3 {
animation-delay: -0.8s;
}
#mainLoading .ddr4 {
animation-delay: -0.7s;
}
#mainLoading .ddr5 {
animation-delay: -0.6s;
}
@keyframes loading {
0%,
40%,
100% {
/*定义每帧的动作*/
-webkit-transform: scaleY(0.5);
}
20% {
-webkit-transform: scaleY(1);
}
}
// App.vue
export default {
mounted() {
// 关闭loading
document.getElementById('mainLoading').style.display = 'none';
},
}
// 如果涉及到微前端，跳转到子应用时可进行如下处理（微前端框架：qiankun）
registerMicroApps(apps, {
beforeLoad: () => {
// 加载子应用 开启loading
document.getElementById('mainLoading').style.display = 'flex';
},
afterMount: () => {
// 子应用加载完毕 关闭loading
document.getElementById('mainLoading').style.display = 'none';
}
});
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献3条内容
所有评论(0)