vant-weapp/packages/skeleton

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

Props

参数	说明	类型	默认值	版本
row	段落占位图行数	number	0	-
row-width	段落占位图宽度，可传数组来设置每一行的宽度	string | string[]	100%	-
title	是否显示标题占位图	boolean	false	-
title-width	标题占位图宽度	string | number	40%	-
avatar	是否显示头像占位图	boolean	false	-
avatar-size	头像占位图大小	string | number	32px	-
avatar-shape	头像占位图形状，可选值为square	string	round	-
loading	是否显示占位图，传false时会展示子组件内容	boolean	true	-
animate	是否开启动画	boolean	true	-