uniapp的移动端骨架屏组件开发应用

配景

基于移动端 UI 骨架屏的扩展性受限，uniapp和小步伐等不支持Vue框架的自界说指令（directives），遂开发组件以实现骨架屏的自界说开发

利用

引入组件

包管演示效果，show默以为true

页面标签自界说绑定

为须要表现骨架的标签，增长指定类名（长宽圆角等样式会和原标签同等，详见

1. (#Sg4fa)
2. <p><img src="https://img-blog.csdnimg.cn/img_convert/4be798906248538ba46fe3d8f27cf659.png" alt="" /></p>
3. <h3 id="QI6vP">实现</h3>
4. <h4 id="c5j79">关键实现</h4>
5. <h5 id="pUy1d">传入参数</h5>
6. 选择器 selector
7. <p>是否显示 show</p>
8. <p><img src="https://img-blog.csdnimg.cn/img_convert/baeb0550cc5e67b8df8cda1ff0faed18.png" alt="" /></p>
9. <h5 id="sHYKL">矩形骨架</h5>
10. 从dom样式中获取圆角参数
11. <p><img src="https://img-blog.csdnimg.cn/img_convert/c9736f671a183a81cc8791c4606d14e5.png" alt="" /></p>
12. <h5 id="KZGRO">圆形（点）骨架</h5>
13. 骨架为原型，圆角参数由宽度计算
14. <p><img src="https://img-blog.csdnimg.cn/img_convert/90b658b5da02739217e2bf763c13c6a9.png" alt="" /></p>
15. <h5 id="njk4v">dom节点获取</h5>
16. 实现区分**H5**和**小程序**，此处还未加入微信小程序适配
17. <p>这里以矩形节点为例</p>
18. <p><img src="https://img-blog.csdnimg.cn/img_convert/10caed5b09667a4a8dea5b48b8a5a7e8.png" alt="" /></p>
19. <h5 id="Sg4fa">code</h5>
20. ```javascript
22.   
23.   
24.       
26. [code]

复制代码