247 lines
6.3 KiB
Vue
247 lines
6.3 KiB
Vue
<template>
|
||
<view class="uv-skeleton">
|
||
<view v-if="loading">
|
||
<view v-for="(item, index) in elements" :key="index">
|
||
<!-- 横向并列布局 -->
|
||
<view class="uv-skeleton__group" :style="[style(item)]" v-if="item.type=='flex'">
|
||
<view v-for="(item2,index2) in item.children" :class="[item2.clas]" :style="[style(item2)]" :key="index2">
|
||
<view v-for="(item3,index3) in item2.elements" :key="index3">
|
||
<!-- 垂直高度站位 -->
|
||
<view :style="{height: $uv.addUnit(item3.height,'rpx')}" v-if="item3.type=='gap'"></view>
|
||
<view :class="[item3.clas, roundClass, animateClass]" :style="[style(item3)]" v-else ref="skeleton"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 自定义骨架屏内容 -->
|
||
<!-- ps 自定义扩展说明： -->
|
||
<!-- 如果你需要自定义模板，可以参照这个custom的写法，增加一个skeleton配置类型，编写布局和样式就可以了 -->
|
||
<!-- 注意事项：为了保证骨架效果和动态效果的一致，扩展时，在你希望实际展示在页面中的元素上加上 :class="[style, animateClass]" 和 :style="[style(item)]" 和 ref="skeleton" -->
|
||
<view :class="[item.clas, animateClass]" :style="[style(item)]" ref="skeleton" v-else-if="item.type == 'custom'"></view>
|
||
<!-- 垂直高度站位 -->
|
||
<view :style="{height: $uv.addUnit(item.height,'rpx')}" v-else-if="item.type=='gap'"></view>
|
||
<!-- 其他基本单位 line avatar 等 -->
|
||
<view :class="[item.clas, roundClass, animateClass]" :style="[style(item)]" v-else ref="skeleton"></view>
|
||
</view>
|
||
</view>
|
||
<view v-else>
|
||
<slot />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import mpMixin from '../../libs/mixin/mpMixin.js'
|
||
import mixin from '../../libs/mixin/mixin.js'
|
||
// #ifdef APP-NVUE
|
||
const animation = weex.requireModule('animation');
|
||
// #endif
|
||
export default {
|
||
name: 'uv-skeletons',
|
||
mixins: [mpMixin, mixin],
|
||
props: {
|
||
// 是否显示骨架
|
||
loading: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 骨架内容 具体说明参考文档：
|
||
skeleton: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
// 是否开启动画效果
|
||
animate: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 是否圆角骨架风格
|
||
round: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
...uni.$uv?.props?.skeleton
|
||
},
|
||
data() {
|
||
return {
|
||
elements: [],
|
||
opacity: 0.5,
|
||
duration: 600
|
||
}
|
||
},
|
||
computed: {
|
||
animateClass() {
|
||
return this.animate ? 'uv-skeleton--animation' : 'uv-skeleton--static';
|
||
},
|
||
roundClass() {
|
||
return this.round ? 'uv-skeleton--round' : 'uv-skeleton--radius';
|
||
},
|
||
style(item) {
|
||
return item => {
|
||
const style = {};
|
||
return this.$uv.deepMerge(style, this.$uv.addStyle(item.style));
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.init();
|
||
// #ifdef APP-NVUE
|
||
if (this.loading && this.animate) {
|
||
this.$uv.sleep(50).then(res => {
|
||
this.createAnimation(this.opacity);
|
||
})
|
||
}
|
||
// #endif
|
||
},
|
||
methods: {
|
||
/**
|
||
* 初始化数据
|
||
*/
|
||
init() {
|
||
let elements = [];
|
||
if (!this.$uv.test.array(this.skeleton)) return this.$uv.error('skeleton参数必须为数组形式，参考文档示例：');
|
||
this.skeleton.forEach(el => {
|
||
const elClass = this.getElCounts(el);
|
||
elements = elements.concat(elClass);
|
||
})
|
||
this.elements = [...elements];
|
||
},
|
||
/**
|
||
* 处理骨架屏参数内容
|
||
* @param {Object} el 每项数据
|
||
*/
|
||
getElCounts(el) {
|
||
let elements = [];
|
||
let children = [];
|
||
if (this.$uv.test.number(el)) {
|
||
elements.push({
|
||
type: 'gap',
|
||
height: el
|
||
});
|
||
return elements;
|
||
} else {
|
||
const type = el.type ? el.type : 'line';
|
||
const num = el.num ? el.num : 1;
|
||
const style = el.style ? el.style : {};
|
||
const styleIsArray = this.$uv.test.array(style);
|
||
const gap = el.gap ? el.gap : '20rpx';
|
||
const child = el.children ? el.children : [];
|
||
for (let i = 0; i < child.length; i++) {
|
||
children[i] = {
|
||
clas: child[i].type.indexOf('avatar') > -1 || child[i].type.indexOf('custom') > -1 ? '' : 'uv-skeleton__group__sub',
|
||
elements: this.getElCounts(child[i])
|
||
};
|
||
}
|
||
for (let i = 0; i < num; i++) {
|
||
if (gap && i < num && i > 0) {
|
||
elements.push({
|
||
type: 'gap',
|
||
height: gap
|
||
});
|
||
}
|
||
elements.push({
|
||
clas: `uv-skeleton__${type}`,
|
||
type,
|
||
style: styleIsArray ? style[i] : style,
|
||
gap,
|
||
children
|
||
});
|
||
}
|
||
return elements;
|
||
}
|
||
},
|
||
/**
|
||
* 创建动画
|
||
*/
|
||
createAnimation(opacity = 1) {
|
||
// loading结束之后或未开启动画不执行
|
||
if (!this.loading || !this.animate) return;
|
||
let count = 0;
|
||
const skeletons = this.$refs.skeleton;
|
||
skeletons.forEach(item => {
|
||
animation.transition(item, {
|
||
styles: {
|
||
opacity: opacity,
|
||
},
|
||
duration: this.duration
|
||
}, () => {
|
||
count++;
|
||
if (count >= skeletons.length) {
|
||
setTimeout(() => {
|
||
this.createAnimation(opacity < 1 ? 1 : this.opacity);
|
||
}, 200)
|
||
}
|
||
});
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
@import '../../libs/css/components.scss';
|
||
@mixin background {
|
||
/* #ifdef APP-NVUE */
|
||
background-color: #e6e6e6;
|
||
/* #endif */
|
||
/* #ifndef APP-NVUE */
|
||
background: linear-gradient(90deg, #F1F2F4 25%, #e6e6e6 37%, #F1F2F4 50%);
|
||
background-size: 400% 100%;
|
||
/* #endif */
|
||
}
|
||
.uv-skeleton__line {
|
||
height: 32rpx;
|
||
// margin-bottom: 30rpx;
|
||
}
|
||
.uv-skeleton__line--sm {
|
||
height: 24rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.uv-skeleton__line--lg {
|
||
height: 48rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.uv-skeleton--static {
|
||
@include background;
|
||
}
|
||
.uv-skeleton--radius {
|
||
border-radius: 8rpx;
|
||
}
|
||
.uv-skeleton--round {
|
||
border-radius: 30rpx;
|
||
}
|
||
.uv-skeleton__avatar {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50rpx;
|
||
}
|
||
.uv-skeleton__avatar--sm {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
border-radius: 25rpx;
|
||
}
|
||
.uv-skeleton__avatar--lg {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border-radius: 100rpx;
|
||
}
|
||
.uv-skeleton__group {
|
||
@include flex;
|
||
&__sub {
|
||
flex: 1;
|
||
}
|
||
}
|
||
.uv-skeleton--animation {
|
||
@include background;
|
||
/* #ifndef APP-NVUE */
|
||
animation: skeleton 1.8s ease infinite
|
||
/* #endif */
|
||
}
|
||
/* #ifndef APP-NVUE */
|
||
@keyframes skeleton {
|
||
0% {
|
||
background-position: 100% 50%
|
||
}
|
||
100% {
|
||
background-position: 0 50%
|
||
}
|
||
}
|
||
/* #endif */
|
||
</style> |