index.vue
2.43 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<template>
<view class="controller">
<view class="container skeleton">
<view class="userinfo">
<block>
<!--skeleton-radius 绘制圆形-->
<image class="userinfo-avatar skeleton-radius" :src="userInfo.avatarUrl" mode="cover"></image>
<!--skeleton-rect 绘制矩形-->
<text class="userinfo-nickname skeleton-rect">{{userInfo.nickName}}</text>
</block>
</view>
<view style="margin: 20px 0">
<view v-for="(item,index) in lists" :key="index" class="lists">
<text class="skeleton-rect">{{item}}</text>
</view>
</view>
<view class="usermotto">
<text class="user-motto skeleton-rect">{{motto}}</text>
</view>
</view>
<!--引用组件-->
<skeleton :show="showSkeleton" ref="skeleton" loading="chiaroscuro" selector="skeleton" bgcolor="#FFF"></skeleton>
</view>
</template>
<script>
//引入骨架屏组件(以我本地地址为例，具体地址由自身引用位置决定)
import skeleton from "@/components/quick-skeleton/quick-skeleton.vue";
export default {
data() {
return {
motto: 'Hello World',
userInfo: {
avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/s4RzXCAQsVNliaJXtHBvdpAkeRwnK7Jhiaf9mzuVqEhZza3zSYM7tJ1xZCQE9SCoOR8qjVEjDKltw1SQnxyicWq6A/132',
nickName: 'jayzou'
},
lists: [
'第1行数据',
'第2行数据',
'第3行数据',
'第4行数据',
'第5行数据',
'第6行数据'
],
showSkeleton: false //骨架屏显示隐藏
}
},
components: {
skeleton
},
onLoad: function () {
},
/**
* 页面载入完成后调用子组件的方法生成预加载效果
*/
onReady:function(){
const that = this;
that.showSkeleton = true;
setTimeout(() => {
that.showSkeleton = false;
}, 2000);
}
}
</script>
<style>
.container {
padding: 20upx 60upx;
}
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}
.lists{
margin: 10px 0;
}
.list{
margin-right: 10px;
}
</style>