骨架屏组件的主要作用就是用来, 当后端的数据还没有返回的时候; 页面的数据还是空白的, 当后端数据加载完成之后.
现在用户就会看见一个效果就是 "闪屏" 效果, 原本这个地方是空白的; 突然就出现内容了, 这样用户的体验感就不太好.
那么解决方案其实有很多, 如:
1. 放一张图片上去, 当数据返回之后; 让图片隐藏, 显示数据
2. 设置一个 loading 效果
3. 使用骨架屏
......
那么现在我们就来聊一聊, 如何去封装一个骨架屏组件(Vue3)
主体思路分析:
1. 首先骨架屏组件肯定是一个通用的组件, 所以我们需要将其放到 components 文件里面
2. 我们需要将 components 文件里面, 所有的通用组件进行全局注册; 这样, 我们封装的组件就可以在项目任何地方, 像使用标签一样使用组件
3. 实现骨架屏, 我们一共需要使用到两个盒子(其实一个也可以)
4. 一个是父盒子, 一个是子盒子; 父盒子用来控制 height width , 还需要设置一些对子盒子约束的样式
5. 子盒子用来控制背景颜色
6. 给父盒子添加一个伪元素, 让伪元素不断的做动画; 给这个伪元素添加绝对定位, 这样就可以覆盖掉子盒子
代码实现:
当然, 想让骨架屏适用于所有的地方的话
就必须暴露出一些属性:
1. 宽度
2. 高度
3. 背景颜色
4. 是否需要动画
<template>
<div class="xtx-skeleton" :style="{width,height}" :class="{shan:animated}">
<!-- 1 盒子-->
<d