分享一个小程序骨架屏skeleton，仿vue-content-loader
- 小程序骨架屏的实现网上也有很多例子，有更简便的直接使用样式去生成默认骨架如：
skeleton - 但是根据个人爱好写法，仿照vue-content-loader的思想还是简单封装一个自己的
- 看一下结构：
- sww-skeleton文件夹是骨架屏的框架，circle和rect分别用来画圆和矩形
- 使用：
在使用骨架屏的页面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}
}