小程序骨架屏

/Components/Skeleton/Skeleton.js

Component({
  properties: {
    bgcolor: {
      type: String,
      value: '#FFF'
    },
    selector: {
      type: String,
      value: 'skeleton'
    },
    loading: {
      type: String,
      value: 'spin'
    }
  },
  data: {
    loadingAni: ['spin', 'chiaroscuro'],
    systemInfo: {},
    skeletonRectLists: [],
    skeletonCircleLists: []
  },
  attached: function () {
    //默认的首屏宽高，防止内容闪现
    const systemInfo = wx.getSystemInfoSync();
    this.setData({
      systemInfo: {
        width: systemInfo.windowWidth,
        height: systemInfo.windowHeight
      },
      loading: this.data.loadingAni.includes(this.data.loading) ? this.data.loading : 'spin'
    })



  },
  ready: function () {
    const that = this;
    //绘制背景
    wx.createSelectorQuery().selectAll(`.${this.data.selector}`).boundingClientRect().exec(function (res) {
      console.log(res)
      that.setData({
        'systemInfo.height': res[0][0].height + res[0][0].top
      })
    });

    //绘制矩形
    this.rectHandle();

    //绘制圆形
    this.radiusHandle();

  },
  methods: {
    rectHandle: function () {
      const that = this;

      //绘制不带样式的节点
      wx.createSelectorQuery().selectAll(`.${this.data.selector} >>> .${this.data.selector}-rect`).boundingClientRect().exec(function (res) {
        
        that.setData({
          skeletonRectLists: res[0]
        })

        console.log(that.data);
      });

    },
    radiusHandle: function () {
      const that = this;

      wx.createSelectorQuery().selectAll(`.${this.data.selector} >>> .${this.data.selector}-radius`).boundingClientRect().exec(function (res) {
        console.log(res);
        that.setData({
          skeletonCircleLists: res[0]
        })

        console.log(that.data);
      });
    },

  }

})

/Components/Skeleton/Skeleton.wxml

<!--<canvas canvas-id="skeleton" disable-scroll="true"></canvas>-->
<view style="width: {{systemInfo.width}}px; height: {{systemInfo.height}}px; background-color: {{bgcolor}}; position: absolute; left:0; top:0; z-index:9998; overflow: hidden;">

    <view wx:for="{{skeletonRectLists}}" wx:key="{{index}}" class="{{loading == 'chiaroscuro' ? 'chiaroscuro' : ''}}" style="width: {{item.width}}px; height: {{item.height}}px; background-color: rgb(194, 207, 214); position: absolute; left: {{item.left}}px; top: {{item.top}}px">
    </view>
    
    <view wx:for="{{skeletonCircleLists}}" wx:key="{{index}}" class="{{loading == 'chiaroscuro' ? 'chiaroscuro' : ''}}" style="width: {{item.width}}px; height: {{item.height}}px; background-color: rgb(194, 207, 214); border-radius: {{item.width}}px; position: absolute; left: {{item.left}}px; top: {{item.top}}px">
    </view>

    <view class="spinbox" wx:if="{{loading == 'spin'}}">
        <view class="spin"></view>
    </view>

</view>

/Components/Skeleton/Skeleton.json

    {
      "component": true
    }

/Pages/Skeleton/Skeleton.js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {
      avatarUrl: 'https://sfault-image.b0.upaiyun.com/117/579/1175792133-5b63fce811636_articlex',
      nickName: 'jayzou'
    },
    lists: [
      'aslkdnoakjbsnfkajbfk',
      'qwrwfhbfdvndgndghndeghsdfh',
      'qweqwtefhfhgmjfgjdfghaefdhsdfgdfh',
    ],
    showSkeleton: true
  },
  onLoad: function () {
    const that = this;
    setTimeout(() => {
      that.setData({
        showSkeleton: false
      })
    }, 2000)
  }
})

/Pages/Skeleton/Skeleton.wxml

<skeleton 
		  selector="skeleton"
          loading="spin"
          bgcolor="#FFF"
          wx:if="{{showSkeleton}}">
</skeleton>
          
<!--index.wxml-->
<view class="container skeleton">

    <view class="userinfo">
        <block>
            <image class="userinfo-avatar skeleton-radius" src="{{userInfo.avatarUrl}}"
                   mode="cover"></image>
            <text class="userinfo-nickname skeleton-rect">{{userInfo.nickName}}</text>
        </block>
    </view>
    <view style="margin: 20px 0">
        <view wx:for="{{lists}}" wx:key="{{index}}" class="lists">
            <icon type="success" size="20" class="list skeleton-radius"/>
            <text class="skeleton-rect">{{item}}</text>
        </view>
    </view>
    <view class="usermotto">
        <text class="user-motto skeleton-rect">{{motto}}</text>
    </view>
    <view style="margin-top: 200px;">
        aaaaaaaaaaa
    </view>
</view>

/Pages/Skeleton/Skeleton.json

{
  "usingComponents": {
    "skeleton": "/Components/Skeleton/Skeleton"
  }
}