Skip to content

Skeleton 骨架屏

用于等待加载内容所展示的占位图形组合,有动态效果加载效果,减少用户等待焦虑。

骨架图风格

支持 avatarimagetextparagraph 四种类型。

html
// 头像骨架屏
<wd-skeleton theme="avatar" />
// 图片骨架屏
<wd-skeleton theme="image" />
// 文本骨架屏
<wd-skeleton theme="text" />
// 段落骨架屏
<wd-skeleton theme="paragraph" />

宫格骨架屏

html
<wd-skeleton :row-col="grid" />
ts
const grid = [
  [
    { width: '48px', height: '48px' },
    { width: '48px', height: '48px' },
    { width: '48px', height: '48px' },
    { width: '48px', height: '48px' },
    { width: '48px', height: '48px' }
  ],
  [
    { width: '48px', height: '16px' },
    { width: '48px', height: '16px' },
    { width: '48px', height: '16px' },
    { width: '48px', height: '16px' },
    { width: '48px', height: '16px' }
  ]
]

单元格骨架屏

html
<view style="display: flex">
  <wd-skeleton :row-col="[{ size: '48px', type: 'circle' }]" />
  <wd-skeleton :custom-style="{ width: '100%', marginLeft: '12px' }" :row-col="[{ width: '50%' }, { width: '100%' }]" />
</view>
<view style="display: flex; margin-top: 20px">
  <wd-skeleton :row-col="[{ size: '48px', type: 'rect' }]" />
  <wd-skeleton :custom-style="{ width: '100%', marginLeft: '12px' }" :row-col="[{ width: '50%' }, { width: '100%' }]" />
</view>

图片组合骨架屏

html
<view>
  <wd-skeleton :row-col="imageGroup" />
  <wd-skeleton :custom-style="{ marginTop: '20px' }" :row-col="imageGroup" />
</view>
ts
const imageGroup = [
  { height: '171px' }, 1, { width: '107px' }, 
  [{ width: '93px' }, { width: '32px', marginLeft: '41px' }]
]

加载动画

支持 gradientflashed

html
<wd-skeleton animation="gradient" theme="paragraph" />
<view style="display: flex">
  <wd-skeleton :row-col="[{ size: '48px', type: 'circle' }]" />
  <wd-skeleton :custom-style="{ width: '100%', marginLeft: '12px' }" animation="flashed" theme="paragraph" />
</view>

插槽内容

可以通过插槽写入展示的内容,当请求结束,将loading设置为false,此时会隐藏骨架组件,同时展示插槽内容。

html
<wd-skeleton 
  :row-col="[
    [
      { width: '48px', height: '48px' },
      { width: '48px', height: '48px' },
      { width: '48px', height: '48px' },
      { width: '48px', height: '48px' },
      { width: '48px', height: '48px' }
    ],
    [
      { width: '48px', height: '16px' },
      { width: '48px', height: '16px' },
      { width: '48px', height: '16px' },
      { width: '48px', height: '16px' },
      { width: '48px', height: '16px' }
    ]
  ]" 
  :loading="showContent"
>
  <wd-grid>
    <wd-grid-item icon-size="32px" icon="picture" text="文字" />
    <wd-grid-item icon-size="32px" icon="picture" text="文字" />
    <wd-grid-item icon-size="32px" icon="picture" text="文字" />
    <wd-grid-item icon-size="32px" icon="picture" text="文字" />
    <wd-grid-item icon-size="32px" icon="picture" text="文字" />
  </wd-grid>
</wd-skeleton>
js
const showContent = ref(true)

Attributes

参数说明类型可选值默认值最低版本
theme骨架图风格SkeletonThemetext avatar paragraph image--
rowCol用于设置行列数量、宽度高度、间距等
【示例一】[1, 1, 2] 表示输出三行骨架图,第一行一列,第二行一列,第三行两列。
【示例二】[1, 1, { width: '100px' }] 表示自定义第三行的宽度为 100px
【示例三】[1, 2, [{ width, height }, { width, height, marginLeft }]] 表示第三行有两列,且自定义宽度、高度和间距
SkeletonRowCol---
loading是否为加载状态,如果是则显示骨架图,如果不是则显示加载完成的内容boolean-true-
animation动画效果SkeletonAnimationgradient flashed--

Slots

name说明最低版本
defaultloading结束后展示内容1.2.21

Released under the MIT License.

Released under the MIT License.