优点
-
<李>简单,不需要工程,不用操纵生成骨架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李>