Skip to content

Commit 83322ac

Browse files
SunQQQSunQQQ
committed
优化首页初始化时骨架屏隐藏时机
1 parent af3f6f9 commit 83322ac

File tree

1 file changed

+123
-126
lines changed

1 file changed

+123
-126
lines changed

‎src/components/MainPage/BlogIndex.vue‎

Lines changed: 123 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,114 @@
11
<template>
2-
<transition name="Fade" mode="out-in">
2+
<transition name="Fade" mode="out-in">
33
<div>
4-
<div class="TopBarHeight"></div>
5-
<div class="BlogIndexContent">
6-
<div class="BlogFlex">
7-
<div class="BlogIndexContentLeft">
8-
<transition name="Fade">
9-
<img src="../../static/img/ArticleList.jpg" v-if="DefaultGraph.ArticleListPart"
10-
class="BlogIndexContentLeftDefaultGraph">
11-
</transition>
12-
<div class="ArticleItem" v-for="(item,i) in ArticleList" v-bind:key="i"
13-
@click="UpdateRouter('BlogDetail',item)">
14-
<div class="ArticleItemCover" v-if="item.ArticleCover">
15-
<img :src="item.ArticleCover">
16-
</div>
17-
<div style="flex: 1">
18-
<div class="ArticleTitle">
19-
<!--<div class="ArticleTag">{{ item.ArticleTag }}</div>-->
20-
<h3 class="ArticleTitleText">{{ item.Title }}</h3>
21-
</div>
22-
<div class="ArticleContent" v-html="item.Summary">
23-
{{ item.Summary }}
24-
</div>
25-
<div class="ArticleFooter">
26-
<!--<div class="ArticleFooterItem">发表：{{ item.CreateDate }}</div>
27-
<div class="ArticleFooterItem" @click="UpdateRouter('BlogDetail',item._id)">评论：{{ item.CommentNum }}</div>-->
28-
<div class="ArticleFooterItem" style="border: none">
29-
<i class="iconfont icon-biaoqian iconBlogIndex"></i>{{ item.ArticleTag }}
30-
</div>
31-
<div class="ArticleFooterItem" style="border: none">
32-
<i class="iconfont icon-shijianzhongbiao iconBlogIndex"></i>{{ item.CreateDate }}
33-
</div>
34-
<div class="ArticleFooterItem" style="border: none" v-show="item.CommentNum">
35-
<i class="iconfont icon-pinglun iconBlogIndex"></i>{{ item.CommentNum }}
36-
</div>
37-
</div>
38-
</div>
39-
</div>
40-
<div class="NoDataHint" v-if="!ArticleList.length">暂无数据</div>
41-
<div class="ListBottom" v-if="AticleBottom">你滑到我底线啦</div>
42-
<Pagination v-on:PaginationToParent="ValueByPagition" ref="Pagi"></Pagination>
4+
<div class="TopBarHeight"></div>
5+
<div class="BlogIndexContent">
6+
<div class="BlogFlex">
7+
<div class="BlogIndexContentLeft">
8+
<img src="../../static/img/ArticleList.jpg" v-if="DefaultGraph.ArticleListPart"
9+
class="BlogIndexContentLeftDefaultGraph">
10+
<div class="ArticleItem" v-for="(item,i) in ArticleList" v-bind:key="i"
11+
@click="UpdateRouter('BlogDetail',item)">
12+
<div class="ArticleItemCover" v-if="item.ArticleCover">
13+
<img :src="item.ArticleCover">
14+
</div>
15+
<div style="flex: 1">
16+
<div class="ArticleTitle">
17+
<!--<div class="ArticleTag">{{ item.ArticleTag }}</div>-->
18+
<h3 class="ArticleTitleText">{{ item.Title }}</h3>
4319
</div>
44-
<div class="BlogIndexContentRight">
45-
<div class="Module HotArticleModule">
46-
<transition name="Fade">
47-
<img src="../../static/img/HotArticleList.jpg" v-if="DefaultGraph.HotArticlePart">
48-
</transition>
49-
<div class="TagListHead">热门博文</div>
50-
<div class="HotArticle">
51-
<div class="HotArticleItem" v-for="(Item,Index) in HotArticleList">
52-
<div v-if="Index == 0" @click="UpdateRouter('BlogDetail',Item)">
53-
<span style="color:#f44e03;font-size: 15px">No{{Index+1}} </span>{{Item.Title}}
54-
</div>
55-
<div v-if="Index == 1" @click="UpdateRouter('BlogDetail',Item)">
56-
<span style="color:#d41800;font-size: 15px">No{{Index+1}} </span>{{Item.Title}}
57-
</div>
58-
<div v-if="Index == 2" @click="UpdateRouter('BlogDetail',Item)">
59-
<span style="color:#f37e21;font-size: 15px">No{{Index+1}} </span>{{Item.Title}}
60-
</div>
61-
<div v-if="Index == 3" @click="UpdateRouter('BlogDetail',Item)">
62-
<span style="color:#f3212d;font-size: 15px">No{{Index+1}} </span>{{Item.Title}}
63-
</div>
64-
<div v-if="Index == 4" @click="UpdateRouter('BlogDetail',Item)">
65-
<span style="color:#212df3;font-size: 15px">No{{Index+1}} </span>{{Item.Title}}
66-
</div>
67-
<div v-if="Index > 4" @click="UpdateRouter('BlogDetail',Item)">
68-
<span>No{{Index+1}} </span>{{Item.Title}}
69-
</div>
70-
</div>
71-
</div>
72-
</div>
73-
<div class="Module" style="padding: 0 0 0.5rem">
74-
<div class="TopBack"></div>
75-
<div class="ZhihuIcon">
76-
<img src="../../static/img/ZhihuIcon.jpg">
77-
</div>
78-
<div class="TextCenter">
79-
孙权的小博客
80-
<a class="BlueButton" href="https://github.com/SunQQQ" target="_blank" @click="readCode()">博客源码</a>
81-
</div>
82-
<div class="BlogStatistic">
83-
<div class="BlogStatisticItem">
84-
<div class="BlogStatisticItemNum">{{ ArticleNum }}</div>
85-
<div class="BlogStatisticItemText">博客文章</div>
86-
</div>
87-
<div class="BlogStatisticItem">
88-
<div class="BlogStatisticItemNum">{{ CommentNum }}</div>
89-
<div class="BlogStatisticItemText">博文评论</div>
90-
</div>
91-
<div class="BlogStatisticItem">
92-
<div class="BlogStatisticItemNum">{{ LeaveMessageNum }}</div>
93-
<div class="BlogStatisticItemText">留言量</div>
94-
</div>
95-
</div>
96-
</div>
97-
<div class="Module ArticleTagModule">
98-
<transition name="Fade">
99-
<img src="../../static/img/Tag.jpg" v-if="DefaultGraph.ArticleTagPart">
100-
</transition>
101-
<div class="TagListHead">文章分类<span style="color: #aaa;font-size: 0.8rem">（点击筛选呦）</span></div>
102-
<div class="TagListTr">
103-
<div :class="item.TagName != Tags.Active ? 'TagListTd' : 'TagListTdActive'"
104-
v-for="item in Tags" :key="item.id" @click="GetArticle(item.TagName)">{{ item.TagName }}
105-
</div>
106-
</div>
107-
</div>
20+
<div class="ArticleContent" v-html="item.Summary">
21+
{{ item.Summary }}
10822
</div>
23+
<div class="ArticleFooter">
24+
<!--<div class="ArticleFooterItem">发表：{{ item.CreateDate }}</div>
25+
<div class="ArticleFooterItem" @click="UpdateRouter('BlogDetail',item._id)">评论：{{ item.CommentNum }}</div>-->
26+
<div class="ArticleFooterItem" style="border: none">
27+
<i class="iconfont icon-biaoqian iconBlogIndex"></i>{{ item.ArticleTag }}
28+
</div>
29+
<div class="ArticleFooterItem" style="border: none">
30+
<i class="iconfont icon-shijianzhongbiao iconBlogIndex"></i>{{ item.CreateDate }}
31+
</div>
32+
<div class="ArticleFooterItem" style="border: none" v-show="item.CommentNum">
33+
<i class="iconfont icon-pinglun iconBlogIndex"></i>{{ item.CommentNum }}
34+
</div>
35+
</div>
36+
</div>
37+
</div>
38+
<div class="NoDataHint" v-if="!ArticleList.length">暂无数据</div>
39+
<div class="ListBottom" v-if="AticleBottom">你滑到我底线啦</div>
40+
<Pagination v-on:PaginationToParent="ValueByPagition" ref="Pagi"></Pagination>
41+
</div>
42+
<div class="BlogIndexContentRight">
43+
<div class="Module HotArticleModule">
44+
<transition name="Fade">
45+
<img src="../../static/img/HotArticleList.jpg" v-if="DefaultGraph.HotArticlePart">
46+
</transition>
47+
<div class="TagListHead">热门博文</div>
48+
<div class="HotArticle">
49+
<div class="HotArticleItem" v-for="(Item,Index) in HotArticleList">
50+
<div v-if="Index == 0" @click="UpdateRouter('BlogDetail',Item)">
51+
<span style="color:#f44e03;font-size: 15px">No{{Index+1}} </span>{{Item.Title}}
52+
</div>
53+
<div v-if="Index == 1" @click="UpdateRouter('BlogDetail',Item)">
54+
<span style="color:#d41800;font-size: 15px">No{{Index+1}} </span>{{Item.Title}}
55+
</div>
56+
<div v-if="Index == 2" @click="UpdateRouter('BlogDetail',Item)">
57+
<span style="color:#f37e21;font-size: 15px">No{{Index+1}} </span>{{Item.Title}}
58+
</div>
59+
<div v-if="Index == 3" @click="UpdateRouter('BlogDetail',Item)">
60+
<span style="color:#f3212d;font-size: 15px">No{{Index+1}} </span>{{Item.Title}}
61+
</div>
62+
<div v-if="Index == 4" @click="UpdateRouter('BlogDetail',Item)">
63+
<span style="color:#212df3;font-size: 15px">No{{Index+1}} </span>{{Item.Title}}
64+
</div>
65+
<div v-if="Index > 4" @click="UpdateRouter('BlogDetail',Item)">
66+
<span>No{{Index+1}} </span>{{Item.Title}}
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
<div class="Module" style="padding: 0 0 0.5rem">
72+
<div class="TopBack"></div>
73+
<div class="ZhihuIcon">
74+
<img src="../../static/img/ZhihuIcon.jpg">
75+
</div>
76+
<div class="TextCenter">
77+
孙权的小博客
78+
<a class="BlueButton" href="https://github.com/SunQQQ" target="_blank" @click="readCode()">博客源码</a>
79+
</div>
80+
<div class="BlogStatistic">
81+
<div class="BlogStatisticItem">
82+
<div class="BlogStatisticItemNum">{{ ArticleNum }}</div>
83+
<div class="BlogStatisticItemText">博客文章</div>
84+
</div>
85+
<div class="BlogStatisticItem">
86+
<div class="BlogStatisticItemNum">{{ CommentNum }}</div>
87+
<div class="BlogStatisticItemText">博文评论</div>
88+
</div>
89+
<div class="BlogStatisticItem">
90+
<div class="BlogStatisticItemNum">{{ LeaveMessageNum }}</div>
91+
<div class="BlogStatisticItemText">留言量</div>
92+
</div>
93+
</div>
10994
</div>
95+
<div class="Module ArticleTagModule">
96+
<transition name="Fade">
97+
<img src="../../static/img/Tag.jpg" v-if="DefaultGraph.ArticleTagPart">
98+
</transition>
99+
<div class="TagListHead">文章分类<span style="color: #aaa;font-size: 0.8rem">（点击筛选呦）</span></div>
100+
<div class="TagListTr">
101+
<div :class="item.TagName != Tags.Active ? 'TagListTd' : 'TagListTdActive'"
102+
v-for="item in Tags" :key="item.id" @click="GetArticle(item.TagName)">{{ item.TagName }}
103+
</div>
104+
</div>
105+
</div>
106+
</div>
110107
</div>
111-
<Heartfelt></Heartfelt>
108+
</div>
109+
<Heartfelt></Heartfelt>
112110
</div>
113-
</transition>
111+
</transition>
114112
</template>
115113

116114
<script>
@@ -193,15 +191,14 @@
193191
data.forEach(function (Item) {
194192
Item.CreateDate = Item.CreateDate.slice(0, 10);
195193
});
194+
That.DefaultGraph.ArticleListPart = false;// 隐藏骨架屏
196195
That.ArticleList = data;
197196
198-
That.DefaultGraph.ArticleListPart = false;
199-
200197
// 创建日志 只有在筛选某个标签后，再记录日志
201-
if(ArticleTag) That.createLog({
202-
moduleType:'button',
203-
operateType:'筛选文章分类',
204-
operateContent:ArticleTag
198+
if (ArticleTag) That.createLog({
199+
moduleType: 'button',
200+
operateType: '筛选文章分类',
201+
operateContent: ArticleTag
205202
});
206203
}
207204
});
@@ -215,7 +212,7 @@
215212
216213
var NumInterval = window.setInterval(function () {
217214
That.LeaveMessageNum += 1;
218-
if(data == That.LeaveMessageNum){
215+
if (data == That.LeaveMessageNum) {
219216
clearInterval(NumInterval);
220217
}
221218
}, 30);
@@ -248,9 +245,9 @@
248245
249246
// 创建日志
250247
That.createLog({
251-
moduleType:'pageTurn',
252-
operateType:'下拉文章列表到',
253-
operateContent:'第' + (SelectPage+1) + '页'
248+
moduleType: 'pageTurn',
249+
operateType: '下拉文章列表到',
250+
operateContent: '第' + (SelectPage + 1) + '页'
254251
});
255252
}
256253
}
@@ -265,7 +262,7 @@
265262
266263
var NumInterval = window.setInterval(function () {
267264
That.CommentNum += 1;
268-
if(data == That.CommentNum){
265+
if (data == That.CommentNum) {
269266
clearInterval(NumInterval);
270267
}
271268
}, 30);
@@ -297,7 +294,7 @@
297294
Success: function (data) {
298295
var NumInterval = window.setInterval(function () {
299296
That.ArticleNum += 1;
300-
if(data == That.ArticleNum){
297+
if (data == That.ArticleNum) {
301298
clearInterval(NumInterval);
302299
}
303300
}, 30);
@@ -316,12 +313,12 @@
316313
});
317314
},
318315
// 查看源码
319-
readCode:function (){
316+
readCode: function () {
320317
// 创建日志
321318
this.createLog({
322-
moduleType:'button',
323-
operateType:'查看源码',
324-
operateContent:'首页入口'
319+
moduleType: 'button',
320+
operateType: '查看源码',
321+
operateContent: '首页入口'
325322
});
326323
}
327324
},
@@ -333,14 +330,14 @@
333330
334331
// 创建日志
335332
that.createLog({
336-
moduleType:'menu',
337-
operateType:'选择菜单',
338-
operateContent:'博文'
333+
moduleType: 'menu',
334+
operateType: '选择菜单',
335+
operateContent: '博文'
339336
});
340337
},
341338
}
342339
</script>
343340

344341
<style scoped lang="less">
345-
@import "../../static/css/BlogIndex";
342+
@import "../../static/css/BlogIndex";
346343
</style>

0 commit comments

Comments
 (0)