Skeleton 骨架屏

用于在内容加载过程中展示一组占位图形。

在app.json或index.json中引入组件，详细介绍见快速上手。

json

"usingComponents": {
  "van-skeleton": "@vant/weapp/skeleton/index"
}

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

通过title属性显示标题占位图，通过row属性配置占位段落行数。

html

<van-skeleton title row="3" />

通过avatar属性显示头像占位图。

html

<van-skeleton title avatar row="3" />

将loading属性设置成false表示内容加载完成，此时会隐藏占位图，并显示Skeleton的子组件。

html

<van-skeleton title avatar row="3" loading="{{ loading }}">
  <view>实际内容</view>
</van-skeleton>

Page({
  data: {
    loading: true,
  },
  onReady() {
    this.setData({
      loading: false,
    });
  },
});