分享一个小程序骨架屏skeleton，仿vue-content-loader

1. 小程序骨架屏的实现网上也有很多例子，有更简便的直接使用样式去生成默认骨架如：
   skeleton
2. 但是根据个人爱好写法，仿照vue-content-loader的思想还是简单封装一个自己的
3. 看一下结构：
4. 
5. sww-skeleton文件夹是骨架屏的框架，circle和rect分别用来画圆和矩形
6. 使用：
   在使用骨架屏的页面json中引入组件

"skeleton": "/components/sww-skeleton/index",
"rect": "/components/sww-skeleton/rect/index",
"circle": "/components/sww-skeleton/circle/index"

在wxml页面使用组件

<skeleton show="{{showSkeleton}}" bgColor="#ffffff" height="1200">
  <rect x="24" y="20" width="120" height="60"/> //画矩形
  <rect x="164" y="20" rx="30" ry="30" width="562" height="60"/> //画矩形
  <circle cx="46" cy="280" r="22"/> //画圆
</skeleton>

参数：

skeleton: {
	show: //控制显隐
	bgColor: //骨架屏背景色 默认 #ffffff
	height: //骨架屏高度 默认100vh，自定义的话传入数字或字符数字字符串 单位rpx
}
rect: {
	x: //矩形左上角x坐标 传入数字或字符数字字符串 单位rpx 下同
	y: //矩形左上角y坐标
	width: //矩形宽度
	height: //矩形高度
	rx: //矩形左边border-radius
	ry: //矩形右边border-radius
}
circle: {
	cx: //圆心所在距离左边距离
	cy: //圆心所在距离顶部距离
	r: //圆半径
}

效果图：

具体代码:
sww-skeleton文件夹下的index.js index.json, index.wxml, index.wxss

//index.js
// components/sww-skeleton/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    show: {
      type: Boolean,
      value: true
    },
    bgColor: {
      type: String,
      value: '#ffffff'
    },
    height: {
      type: [String, Number],
      value: 0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {},

  /**
   * 组件的方法列表
   */
  methods: {
    preventTouchMove() {//阻止触摸
      return false
    }
  }
})

//index.json
{
  "component": true,
  "usingComponents": {}
}

//index.wxml
<!--components/sww-skeleton/index.wxml-->
<view class="sww-skeleton-box" catchtouchmove="preventTouchMove" wx:if="{{show}}"
      style="background-color: {{bgColor}}; height: {{height ? height + 'rpx' : '100vh'}}">
  <slot></slot>
</view>

//index.wxss
/* components/sww-skeleton/index.wxss */
.sww-skeleton-box {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: 99999;
}

rect文件夹下的index.js index.json, index.wxml, index.wxss

//index.js
// components/sww-skeleton/rect/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    x: {
      type: [String, Number], //单位rpx
      value: 0
    },
    y: {
      type: [String, Number], //单位rpx
      value: 0
    },
    rx: {
      type: [String, Number], //单位rpx
      value: 0
    },
    ry: {
      type: [String, Number], //单位rpx
      value: 0
    },
    width: {
      type: [String, Number], //单位rpx
      value: 0
    },
    height: {
      type: [String, Number], //单位rpx
      value: 0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

//index.json
{
  "component": true,
  "usingComponents": {}
}

//index.wxml
<!--components/sww-skeleton/rect/index.wxml-->
<view class="sww-skeleton-rect"
      style="position: absolute;width: {{width}}rpx;height: {{height}}rpx;top: {{y}}rpx;left: {{x}}rpx;border-radius: {{rx}}rpx {{ry}}rpx {{rx}}rpx {{ry}}rpx"></view>

//index.wxss
/* components/sww-skeleton/rect/index.wxss */
.sww-skeleton-rect {
  animation: changeBg 1s linear 0s infinite alternate;
}

@keyframes changeBg {
  from {background-color: #ecebeb}
  to {background-color: #f3f3f3}
}

circle文件夹下的index.js index.json, index.wxml, index.wxss

//index.js
// components/sww-skeleton/circle/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    cx: { //圆心所在x轴
      type: [String, Number],
      value: 0
    },
    cy: { //圆心所在y轴
      type: [String, Number],
      value: 0
    },
    r: { //半径
      type: [String, Number],
      value: 0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

//index.json
{
  "component": true,
  "usingComponents": {}
}

//index.wxml
<!--components/sww-skeleton/circle/index.wxml-->
<view class="sww-skeleton-circle"
style="width: {{2 * r}}rpx;height: {{2 * r}}rpx;border-radius: 50%;position: absolute;top: {{cy - r}}rpx;left: {{cx - r}}rpx;"></view>

//index.wxss
/* components/sww-skeleton/circle/index.wxss */
.sww-skeleton-circle {
  animation: changeBg 1s linear 0s infinite alternate;
}

@keyframes changeBg {
  from {background-color: #ecebeb}
  to {background-color: #f3f3f3}
}