# Skeleton 骨架屏

### 引入

在`index.config.js中引入组件

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



## 代码演示

### 基础用法

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

```html
  <van-skeleton
            title
            row="3"
            rowWidth="{{ ['100%', '100%', '80%'] }}"
            loading={true}
          />
```

### 显示头像

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

```html
  <van-skeleton
            title
            avatar
            row="3"
            loading={true}
          />
```

### 展示子组件

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

```html
  <van-switch checked={this.state.show } size="24px" onChange={(e)=>this.onChange(e)} />
  <van-skeleton
       title
       avatar
       row="3"
       loading={ !this.state.show }
  >
       <view class="demo-preview">
              <image class="demo-preview-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591721485431&di=5c18b08c548f790b8f1014ca65b23bfc&imgtype=0&src=http%3A%2F%2Fimg.alicdn.com%2Fimgextra%2Fi2%2F2354867889%2FTB2IAk5bFXXXXXvXpXXXXXXXXXX-2354867889.jpg"/>
              <view class="demo-content">
                <view class="demo-content-h3">关于 KY Weapp</view>
                <view class="domo-content-p">KY Weapp 是移动端组件库 Taro 的小程序版本，两者基于相同的视觉规范，提供一致的 API
                  接口，助力开发者快速搭建小程序应用。
                </view>
              </view>
       </view>
   </van-skeleton>
```

```js

  state = {
      show: false
  };
  onChange({ detail }) {
     this.setState({ show: detail });
   }

```

## API
### 注:属性应用在组件上需要统一使用驼峰式命名，如custom-class应变为
```html
<van-button type="primary" customClass='myClass' size="large">大号按钮</van-button>
```
### 注:事件应用在组件上需要统一使用驼峰式命名，如bind:click/bind:search/bind:before-enter应变为
```html
<van-button type="primary" onClick={()=>this.onClick()}>大号按钮</van-button>
<van-search type="primary" onSearch={()=>this.onSearch()}>大号按钮</van-search>
<van-transition type="primary" onBeforeEnter={()=>this.onBeforeEnter()}>大号按钮</van-transition>
```
### 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` | - |