优点
-
<李>简单,不需要工程,不用操纵生成骨架dom,也不需要二次开发维护李
<李>定制程度高,想怎么搞就怎么搞李
<李>不臃肿,只给你想要的李
缺点
-
<李>自动化程度低,需要在骨架dom上手动添加类李
<李>协同要求高,不像工程化能通过工程去约束李
思路
通过伪元素实现骨架样式,通过操作样式实现骨架和页面的动态切换
实现
css部分(scss写法)
通过<代码> 后伪元素生成骨架样式,并通过绝对<代码> 覆盖到实际元素上
<代码>专门建立的学习Q-q-u-n: 784-783-012,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
.skt-loading {
pointer-events:没有;/*加载中阻止事件*/.skeleton {
位置:相对;
溢出:隐藏;
边界:没有!重要;
border - radius: 5 px;
背景颜色:透明!重要;
背景图片:没有!重要;
后,::{
内容:”;
位置:绝对的;
左:0;
上图:0;
z - index: 9;
宽度:100%;
高度:100%;
background - color: # EBF1F8;
显示:块;
}/*下面这部分都是自定义的,看需求修改*/后,不是(.not-round):: {
border - radius: 4 px;
}
之前,不是(.not-before):: {
位置:绝对的;
上图:0;
宽度:30%;
高度:100%;
内容:“”;
背景:线性渐变(向右,rgba (255255255 0) 0,
rgba (255255255。3) 50%, rgba (255255255 0) 100%);
变换:skewX(-45度);
z - index: 99;
动画:skeleton-ani 1 s缓解无限;
显示:块;
}
和。{徽章
后,::{
background - color: # F8FAFC;
}
}
}
}
@keyframes skeleton-ani{/*骨架屏动画*/从{
左:-100%;
}
,{
左:150%;
}
}
html部分
只需要在你认为合理的骨架粒度元素上添加<代码> 类骨架即可
js部分
控制好<代码> skt-loading>
使用注意
-
<李>后伪元素无法插入到inputimg等非容器元素中,所以如果需要添加skleton,则需要再加一层元素将其包裹李
<李>对于像vuereact数据驱动页面需要先有模拟数据以生成dom李
