刘文博 / gulu-vue

Blame view

src/pages/test/index.vue 2.43 KB
edit raw normal view history
53bcba4f8   吉鹏   文件分包，首页添加骨架屏幕 
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>