Skeleton 骨架屏

在需要等待加载内容的位置提供一个占位图形组合。

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "Skeleton",
  3.     "usingComponents": {
  4.         "wux-skeleton": "../../dist/skeleton/index",
  5.         "wux-skeleton-avatar": "../../dist/skeleton-avatar/index",
  6.         "wux-skeleton-paragraph": "../../dist/skeleton-paragraph/index",
  7.         "wux-row": "../../dist/row/index",
  8.         "wux-col": "../../dist/col/index"
  9.     }
  10. }

示例

  1. <view class="page">
  2.     <view class="page__hd">
  3.         <view class="page__title">Skeleton</view>
  4.         <view class="page__desc">骨架屏</view>
  5.     </view>
  6.     <view class="page__bd page__bd_spacing">
  7.         <view class="sub-title">Default</view>
  8.         <wux-skeleton>
  9.             <wux-skeleton-paragraph />
  10.         </wux-skeleton>
  11.         <view class="sub-title">Rounded</view>
  12.         <wux-skeleton active>
  13.             <wux-skeleton-paragraph rounded />
  14.         </wux-skeleton>
  15.         <view class="sub-title">Rows = 4</view>
  16.         <wux-skeleton active>
  17.             <wux-skeleton-paragraph rows="4" />
  18.         </wux-skeleton>
  19.         <view class="sub-title">With avatar</view>
  20.         <wux-skeleton active>
  21.             <wux-row>
  22.                 <wux-col span="2">
  23.                     <wux-skeleton-avatar />
  24.                 </wux-col>
  25.                 <wux-col span="10">
  26.                     <wux-skeleton-paragraph />
  27.                 </wux-col>
  28.             </wux-row>
  29.         </wux-skeleton>
  30.     </view>
  31. </view>

视频演示

Skeleton

API

Skeleton props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-skeleton
active boolean 是否展示动画效果 false

Skeleton externalClasses

名称 描述
wux-class 根节点样式类

SkeletonAvatar props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-skeleton-avatar
shape string 指定头像的形状，可选值为 circle、rounded、square circle
size string 设置头像的大小，可选值为 small、default、large default

SkeletonAvatar externalClasses

名称 描述
wux-class 根节点样式类

SkeletonParagraph props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-skeleton-paragraph
rows number 设置段落占位图的行数 3
rounded boolean 是否圆角 false

SkeletonParagraph externalClasses

名称 描述
wux-class 根节点样式类