更新记录

v1.0.0(2019-10-14)

v1.0.0

  • 添加skeleton组件

平台兼容性

skeleton

uni-app 骨架屏组件,用于数据加载时显示占位元素

属性说明

属性名 类型 默认值 说明
loading Boolean true 是否显示占位图
showAvatar Boolean true 是否显示头像占位图
avatarSize String 50px 头像占位图大小
avatarShape String round 头像形状,可选值:round, square
showTitle Boolean true 是否显示标题占位图
titleWidth String 40% 标题占位图宽度
row Number 3 段落占位图行数
animate Boolean true 是否开启动画

使用示例

<skeleton
  :loading="loading"
  :avatarSize="skeleton1.avatarSize"
  :row="skeleton1.row"
  :showTitle="skeleton1.showTitle"
>
  <view class="section-content">我是段落1</view>
</skeleton>
import Skeleton from '../components/skeleton/index.vue'
export default {
  components: {
    Skeleton
  },
  data() {
    return {
      loading: true,
      skeleton1 : {
        avatarSize: '52px',
        row: 3,
        showTitle: true,
      }
    }
  },
  created() {
    this.reloadData()
  },
  methods: {
    reloadData() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 3000)
    },
  },
}

效果图

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问