@retailwe/ui-skeleton v0.0.21

skeleton 骨架屏

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "back-top": "@retailwe/ui-skeleton/index"
}

代码演示

基础用法

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

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

显示头像

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

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

展示子组件

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

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

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

API

Props

Props