--- title: Skeleton 骨架屏 description: 用于等待加载内容所展示的占位图形组合，有动态效果加载效果，减少用户等待焦虑。 spline: data isComponent: true ---

## 引入全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。 ```json "usingComponents": { "t-skeleton": "tdesign-miniprogram/skeleton/skeleton" } ``` ## 代码演示 ### 类型 #### 基础骨架屏 {{ theme }} #### 宫格骨架屏 {{ grid }} #### 单元格骨架屏 {{ cell-group }} #### 图片组合骨架屏 {{ image-group }} ### 动画 #### 渐变加载效果 {{ animation }} ## API ### Skeleton Props | 名称 | 类型 | 默认值 | 说明 | 必传 | | ---------------- | ------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | | animation | String | - | 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为空则表示没有动画。可选项：gradient/flashed | N | | external-classes | Array | - | 组件类名，分别用于设置组件外层、每一列等元素类名。`['t-class', 't-class-row', 't-class-col']` | N | | loading | Boolean | - | 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容 | N | | row-col | Array |- | 用于设置行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距。TS 类型：`SkeletonRowCol`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/skeleton/type.ts) | N | | theme | String | text | 骨架图风格，有头像、图片、文本、段落等5大类。可选项：avatar/image/text/paragraph | N |