为了优化页面加载后台数据时的用户体验,在loading的过程中通过骨架屏显示。
骨架屏的实现:
1、专门维护多一个骨架屏页面,如element-ui种的el-skeleton
组件
2、基于CSS方式实现,实现方式如下:
CSS设置数据加载时的样式
@keyframes skeleton-animation {
0% {
left: -100%
}
to {
left: 150%
}
}
.skeleton-load{
}
.skeleton-load .skeleton {
position: relative;
overflow: hidden;
border: none !important;
border-radius: 5px;
background-color: rgba(0,0,0,0)!important;
background-image: none!important;
pointer-events: none;
margin-bottom: 8upx;
}
.skeleton-load .skeleton:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 9;
background-color: #ededed;
display: block
}
.skeleton-load .skeleton:not(.not-r