component/skeleton/index.js

Component({
  properties: {
    show: {
      type: Boolean,
      value: true
    },
    loading: {
      type: Boolean,
      value: false
    },
  },
  attached: function () {
    const systemInfo = wx.getSystemInfoSync();
    this.setData({
      systemInfo: {
        width: systemInfo.windowWidth,
        height: systemInfo.windowHeight
      },
    })
  },
  ready: function () {
    if(this.properties.loading == false){
      setTimeout(() => {
        this.setData({
          show: false
        })
      },1500)
    }
  },
  methods: {
    //锁屏
    touchmove: function () {
    }
  },
})

component/skeleton/index.json

{
  "component": true
}

component/skeleton/index.wxml

<view class="skeleton" catchtouchmove="touchmove" style="width: {{systemInfo.width}}px; height: {{systemInfo.height}}px;" wx:if="{{show}}">
  <view class="header">
    <view class='skeleton-text'>
      <view class='line lineA'></view>
      <view class='line lineB'></view>
      <view class='line lineC'></view>
    </view>
  </view>
  <view class="bottom">
    <view class="skeleton-h1 animation"></view>
    <view class="skeleton-h2 animation"></view>
    <view class="skeleton-h3 animation"></view>
    <view class="skeleton-h4 animation"></view>
    <view class="skeleton-head animation"></view>
    <view class="skeleton-body">
      <view class="skeleton-100 animation"></view>
      <view class="skeleton-80 animation skeleton-mt"></view>
    </view>
    <view class="skeleton-head animation"></view>
    <view class="skeleton-body">
      <view class="skeleton-80 animation"></view>
      <view class="skeleton-100 animation skeleton-mt"></view>
    </view>
    <view class="skeleton-head animation"></view>
    <view class="skeleton-body">
      <view class="skeleton-100 animation"></view>
      <view class="skeleton-80 animation skeleton-mt"></view>
    </view>
  </view>
</view>

component/skeleton/index.wxss

/*加载骨架*/
.skeleton{position:fixed;z-index: 9999;height: 100%;width: 100%;bottom:0px;top:0px;background:#fff;box-sizing: border-box;background-color:#F8F6F8;}
.animation{-webkit-animation:skeleton-animate 1.2s ease-in-out infinite;animation:skeleton-animate 1.2s ease-in-out infinite;}
.skeleton .skeleton-head,.skeleton .skeleton-100,.skeleton .skeleton-80,.skeleton .skeleton-60{background:#F8F6F8;float:left;border-radius:10px}
.skeleton-h1 {width:40%;height:20px;margin-bottom:10px;border-radius:10px;background:#FFE8E8}
.skeleton-h2{width:35%;height:10px;margin-bottom:20px;border-radius:10px;background:#F8F6F8}
.skeleton-h3{width:100%;height:30px;margin-bottom:10px;border-radius:10px;background:#F8F6F8}
.skeleton-h4{width:80%;height:20px;margin-bottom:20px;border-radius:10px;background:#F8F6F8}
.skeleton-head {width:20%;height:80px;margin-bottom:10px;}
.skeleton-body {margin-left:22%;height: 80px;margin-bottom:10px;}
.skeleton-100 {width:100%;height: 40px;}
.skeleton-80 {width:80%;height: 30px;}
.skeleton-60 {width:60%;height: 30px;}
.skeleton-mt{margin-top:10px;}
.skeleton-text{color: #FF0000;text-align: center;line-height:30px;font-size:28rpx;}
.line{display: inline-block;width:5px;height:5px;border-radius: 15px;margin:0px 5px;background:#ccc}
@keyframes loading{50%{width: 30px}100%{width:5px}}
.lineA{animation: loading 1.5s 0s infinite}
.lineB{animation: loading 1.5s 0.3s infinite}
.lineC{animation: loading 1.5s 0.6s infinite}
.header{position: absolute;left:10px;right:10px;top:10%;}
.bottom{position: absolute;bottom:0px;left:0px;right:0px;background-color:#FFF;padding: 10px;}
@keyframes skeleton-animate{50%{opacity:.4}}

在页面中调用框架

//json中引入组件
"usingComponents": {
    "skeleton": "./component/skeleton/index",
｝
//wxml页面中插入
<skeleton />