跳到主要内容

骨架图

模块商店卡片加载过程展示骨架图功能，骨架图通过服务端渲染，可避免模块高度塌陷导致的闪动问题提升用户体验。

使用方法​

首先在 defaultData.json 中增加骨架屏配置参数。

src/lib/defaultData.json
{
  "data": {
    "skeleton": {
      "height": "",
      "bgColor": ""
    }
  }
}

然后在编辑区组件中 edit/index.tsx 中引入骨架图组件，将参数传入组件中即可。

src/lib/edit/index.tsx
import Skeleton from '../../components/Skeleton';

const EditCard: React.FC<TProps> = (props) => {
  const { confData, isDarkMode, dispatch } = props;

  return (
    <>
      {/* 骨架图相关配置 */}
      <Skeleton
        confData={confData}
        isDarkMode={isDarkMode}
        dispatch={dispatch}
      />
    </>
  );
};

Props​

参数类型说明默认值
confDataTConfData包含卡片的所有配置数据的数据集-
isDarkModeboolean是否为暗黑模式false
dispatch(action: any) => void魔方编辑器 store 数据更新方法-

FAQ​

如何验证功能是否配置成功。​

在专题配置页面通过 快速提测方式 引入测试包，然后配置骨架屏高度及背景颜色 发布上线 后，查看线上链接验证 模块骨架图是否生效。

模块不确定高度怎么办？​

通常情况下，此类模块可以配置一个最小高度，这对提升 CLS 评分和减少影响下方模块的加载有很大帮助。

目前高度配置 支持各种常见单位 px/rem/vw 包括 calc 运算。例子：100px，1rem，40vw，calc((100vw - 20px) \* 0.3);