You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
2.0 KiB
85 lines
2.0 KiB
4 years ago
|
# skeleton组件
|
||
|
|
|
||
|
|
### 1.描述
|
||
|
|
> 此组件用于加载数据时占位图显示，跟vant-ui骨架屏用法相似，但比vant-ui更灵活
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
### 2.用法
|
||
|
|
|
||
|
|
- 基本用法
|
||
|
|
|
||
|
|
代码：
|
||
|
|
```vue
|
||
|
|
//基本用法
|
||
|
|
<skeleton :row="3" animate :loading="loading" >
|
||
|
|
<view>
|
||
|
|
content
|
||
|
|
</view>
|
||
|
|
</skeleton>
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
- **显示 title ——通过 **title 属性显示title占位图
|
||
|
|
|
||
|
|
代码：
|
||
|
|
```vue
|
||
|
|
//显示 title——通过 title 属性显示title占位图
|
||
|
|
<skeleton :row="3" title animate :loading="loading">
|
||
|
|
<view>
|
||
|
|
content
|
||
|
|
</view>
|
||
|
|
</skeleton>
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
- 显示头像（上面)——通过avatar=‘top’让头像的占位图上面显示
|
||
|
|
|
||
|
|
代码：
|
||
|
|
```vue
|
||
|
|
<skeleton :avatar="top" avatarAlign="left" :row="3" animate :loading="loading" style="margin-top:24rpx;">
|
||
|
|
<view>
|
||
|
|
content
|
||
|
|
</view>
|
||
|
|
</skeleton>
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
- 显示头像（左边)——通过avatar=‘left’让头像的占位图左边显示
|
||
|
|
|
||
|
|
代码：
|
||
|
|
```vue
|
||
|
|
<skeleton title :avatar="left" :row="3" animate :loading="loading" style="margin-top:24rpx;">
|
||
|
|
<view>
|
||
|
|
content
|
||
|
|
</view>
|
||
|
|
</skeleton>
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
- 显示banner**——通过 **banner属性显示banner占位图（只显示banner，不显示内容占位图时设置row="0"）
|
||
|
|
|
||
|
|
代码：
|
||
|
|
```vue
|
||
|
|
<skeleton banner :row="0" animate :loading="loading" style="margin-top:24rpx;">
|
||
|
|
<view>
|
||
|
|
content
|
||
|
|
</view>
|
||
|
|
</skeleton>
|
||
|
|
```
|
||
|
|
###
|
||
|
|
### 3. API
|
||
|
|
### Props
|
||
|
|
| **属性名** | **说明** | **类型** | **默认值** | 可取值 |
|
||
|
|
| --- | --- | --- | --- | --- |
|
||
|
|
| loading | 是否显示骨架屏 | Boolean | true | true/false |
|
||
|
|
| row | 段落行数 | Number | String | 3 | 0表示不展现 |
|
||
|
|
| rowWidth | 段落行宽度 | Boolean | Number | '100%' | |
|
||
|
|
| title | 是否显示标题 | Boolean | String | false | |
|
||
|
|
| banner | 是否显示banner | Boolean | String | false | |
|
||
|
|
| animate | 是否开启动画 | Boolean | String | false | |
|
||
|
|
| avatar | 头像位置 | Boolean | String | ''空 | left/top |
|
||
|
|
| avatarSize | 头像大小 | String | - | |
|
||
|
|
| avatarShape | 头像形状 | String | circle | circle/round |
|
||
|
|
|