Skeleton 骨架屏

介绍

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

引入

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

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

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

代码演示

基础用法

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

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

显示头像

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

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

展示子组件

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

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

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

API

Props