55 lines
4.3 KiB
Markdown
55 lines
4.3 KiB
Markdown
---
|
||
title: Skeleton 骨架屏
|
||
description: 用于等待加载内容所展示的占位图形组合，有动态效果加载效果，减少用户等待焦虑。
|
||
spline: data
|
||
isComponent: true
|
||
---
|
||
|
||
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-94%25-blue" /></span>
|
||
## 引入
|
||
|
||
全局引入，在 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 |
|