在uview中使用骨架屏的方法

1,904 阅读1分钟

www.uviewui.com/components/…

image.png

image.png

代码中:

image.png

image.png

可选的类名 可以添加自定义样式 方形的 圆型的

总结就是 在最外层放上

<view class="container u-skeleton">

在其中需要子容器中加入骨架屏的class即可

<!--u-skeleton-rect 绘制矩形-->
<text class="u-skeleton-rect">{{item}}</text>
<!--u-skeleton-circle 绘制圆形-->
<image class="userinfo-avatar u-skeleton-circle" :src="userInfo.avatarUrl"></image>
<!--u-skeleton-fillet 绘制圆角矩形-->
<text class="u-skeleton-fillet">{{userInfo.nickName}}</text>

在底部添加 改行代码

<u-skeleton :loading="loading"  bgColor="#FFF"></u-skeleton>

其中 loading 要在请求后设置为false bgColor="#FFF" 控制骨架颜色