<template>
  <view>
    <nav-bar title="骨架屏"></nav-bar>
    <view class="content">
      基础用法
      <skeleton :row="3" animate :loading="loading">
        <view> content1 </view>
      </skeleton>
      显示 title
      <skeleton :row="3" title animate :loading="loading">
        <view> content2 </view>
      </skeleton>
      显示头像（上面)
      <skeleton :avatar="avatarTop" :row="3" animate :loading="loading" style="margin-top: 24rpx">
        <view> content3 </view>
      </skeleton>
      显示头像（左面）
      <skeleton title :avatar="avatarLeft" :row="3" animate :loading="loading" style="margin-top: 24rpx">
        <view> content4 </view>
      </skeleton>
      显示banner
      <skeleton banner :row="0" animate :loading="loading" style="margin-top: 24rpx">
        <view> content5 </view>
      </skeleton>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: true, // 是否显示骨架屏组件
      avatarTop: 'top',
      avatarLeft: 'left',
    };
  },
  onLoad() {
    // 通过延时模拟向后端请求数据，调隐藏骨架屏
    setTimeout(() => {
      this.loading = false;
    }, 3000);
  },
};
</script>
