## 1. 使用须知
官网文档
[https://www.uviewui.com/components/skeleton.html](https://www.uviewui.com/components/skeleton.html)
占位说明
`u-skeleton` 组件需要跟 `class=u-skeleton` 元素同一等级
## 2. 图片/图标固定元素
- 对于有固定宽高的元素的，直接使用`u-skeleton-*`就可以，不用考虑占位的问题。
- 如果是高度自适应的图片，建议使用`min-height`
## 3. 文字元素
当请求未结束时，这时候数据是空的，空的文字数据是没有宽高的，这样对一个的骨架屏元素就显示不出来。
```
<block>
<!--u-skeleton-circle 绘制圆形-->
<image class="userinfo-avatar u-skeleton-circle" :src="userInfo.avatarUrl"></image>
<!--u-skeleton-fillet 绘制圆角矩形（请求未完成，nickname没有数据，所以会导致骨架屏元素就显示不了）-->
<view class="nickname u-skeleton-fillet">{{userInfo.nickName}}</view>
</block>
```
使用 `$st(text = '', loading = false, count = 4)` 方法输出文字占位符
text：输出的文字
loading：骨架屏的加载状态
count：占位文字的数量，目前是中文长度。
```
<block>
<!--u-skeleton-circle 绘制圆形-->
<image class="userinfo-avatar u-skeleton-circle" :src="userInfo.avatarUrl"></image>
<!--u-skeleton-fillet 绘制圆角矩形（请求未完成，nickname没有数据，所以会导致骨架屏元素就显示不了）-->
<view class="nickname u-skeleton-fillet">{{$st(userInfo.nickName,loading,4)}}</view>
</block>
```
## 4. 请求列表数据
大多数情况下，请求的数据都是列表数据，但是骨架屏元素都是设置在列表元素项里的，如果列表的数据是空，那边就连占位符都没有展示出来。
```
<view style="margin: 20px 0">
<!-- 如果 lists 没有数据，则下方的 u-skeleton-rect 不会显示 -->
<view v-for="(item,index) in lists" :key="index" class="lists">
<!--u-skeleton-rect 绘制矩形-->
<view class="lists-text u-skeleton-rect">{{$st(item,loading,18)}}</view>
</view>
</view>
```
同样是调用 `$st(array=[], loading = false, count = 4)` 方法输出数组
array：输出数组
loading：骨架屏的加载状态
count：数组项数量。
```
<view style="margin: 20px 0">
<view v-for="(item,index) in $st(lists,loading,3)" :key="index" class="lists">
<!--u-skeleton-rect 绘制矩形-->
<view class="lists-text u-skeleton-rect">{{$st(item,loading,18)}}</view>
</view>
</view>
```
通过`$st`方法获得的占位数组是 默认空对象的{}的，有时候空对象会对二级元素产生错误，你也可以自己通过`computed` 处理列表数据。
```
computed: {
show_list() {
return this.lists.length == 0 ? [{a:{b:c}}, {a:{b:c}}, {a:{b:c}}] : this.lists
}
},
```
