Skip to content

Commit 7e6d6da

Browse files
lang1427lang1427
committed
首屏加载/tmp/SGPicFaceTpBq/3444/98A81B53.png动画，添加vue-content-loader骨架屏
1 parent 7ad2e22 commit 7e6d6da

File tree

12 files changed

+371
-63
lines changed

12 files changed

+371
-63
lines changed

‎README.en.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88

99
**Project analysis online** [Source resolution address](https://blog.csdn.net/weixin_42661283/article/details/106552202)
1010

11+
> vue-content-loader [TypeScript Support](https://github.com/egoist/vue-content-loader/pull/13)
12+
1113
> Continuous improvement of projects and ongoing updates...
1214
1315
##### Please Star，Issues

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88

99
**项目解析上线啦** [源码解析地址](https://blog.csdn.net/weixin_42661283/article/details/106552202)
1010

11+
> vue-content-loader [TypeScript Support](https://github.com/egoist/vue-content-loader/pull/13)
12+
1113
> 项目不断完善进行中 持续更新...
1214
1315
##### 欢迎 Star，Issues

‎package-lock.json

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"pinyin": "^2.9.0",
2121
"vue": "^2.6.10",
2222
"vue-class-component": "^7.0.2",
23+
"vue-content-loader": "^0.2.3",
2324
"vue-lazyload": "^1.3.3",
2425
"vue-property-decorator": "^8.3.0",
2526
"vue-router": "^3.1.3",

‎public/index.html

Lines changed: 189 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,191 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7-
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8-
<title>vue-typescript-music</title>
9-
</head>
10-
<body>
11-
<noscript>
12-
<strong>We're sorry but vue-typescript-music doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13-
</noscript>
14-
<div id="app"></div>
15-
<!-- built files will be auto injected -->
16-
</body>
17-
</html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
8+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
9+
<style type="text/css">
10+
@keyframes hourglass-spin {
11+
0% {
12+
transform: rotate(180deg) scale(0.4);
13+
}
14+
15+
10% {
16+
transform: rotate(360deg) scale(0.4);
17+
}
18+
19+
50% {
20+
transform: rotate(360deg) scale(0.4);
21+
}
22+
23+
60% {
24+
transform: rotate(540deg) scale(0.4);
25+
}
26+
27+
100% {
28+
transform: rotate(540deg) scale(0.4)
29+
}
30+
}
31+
32+
@keyframes hourglass-sand {
33+
0% {
34+
background-position: 0 250px;
35+
}
36+
37+
50% {
38+
background-position: 0 0;
39+
}
40+
41+
100% {
42+
background-position: 0 -250px;
43+
}
44+
}
45+
46+
@keyframes hourglass-stream {
47+
0% {
48+
top: 290px;
49+
opacity: 0;
50+
}
51+
52+
10% {
53+
opacity: 1;
54+
}
55+
56+
49.9% {
57+
top: 290px;
58+
opacity: 1;
59+
}
60+
61+
50% {
62+
top: 20px;
63+
opacity: 0;
64+
}
65+
66+
60% {
67+
opacity: 1;
68+
}
69+
70+
100% {
71+
top: 20px;
72+
opacity: 1;
73+
}
74+
}
75+
76+
/* All other browsers */
77+
78+
#first-loading {
79+
position: fixed;
80+
left: 0;
81+
top: 0;
82+
bottom: 0;
83+
right: 0;
84+
display: flex;
85+
align-items: center;
86+
justify-content: center;
87+
}
88+
89+
.hourglass {
90+
position: relative;
91+
width: 280px;
92+
height: 560px;
93+
animation: hourglass-spin 8s ease-in-out 0s infinite;
94+
}
95+
96+
.hourglass::before,
97+
.hourglass::after {
98+
position: absolute;
99+
content: '';
100+
left: 0;
101+
bottom: 0;
102+
width: 240px;
103+
height: 250px;
104+
background: #ccc;
105+
border: 20px solid #ccc;
106+
border-top-left-radius: 150px 250px;
107+
border-top-right-radius: 150px 250px;
108+
}
109+
110+
.hourglass::before {
111+
top: 0;
112+
transform: rotate(180deg);
113+
-webkit-transform: rotate(180deg);
114+
}
115+
116+
.hourglass .hourglass-stand::after,
117+
.hourglass .hourglass-stand::before {
118+
position: absolute;
119+
content: '';
120+
z-index: 3;
121+
left: -40px;
122+
bottom: 0;
123+
width: 360px;
124+
height: 50px;
125+
background: #ccc;
126+
}
127+
128+
.hourglass .hourglass-stand::before {
129+
top: 0;
130+
}
131+
132+
.hourglass .hourglass-sand::before,
133+
.hourglass .hourglass-sand::after {
134+
position: absolute;
135+
content: '';
136+
z-index: 2;
137+
left: 20px;
138+
bottom: 20px;
139+
width: 240px;
140+
height: 250px;
141+
background: linear-gradient(yellow 0%, yellow 50%, #fff 50%, #eee 100%);
142+
background-size: 300px 500px;
143+
border-top-left-radius: 130px 230px;
144+
border-top-right-radius: 130px 230px;
145+
animation: hourglass-sand 8s ease-in-out 0s infinite;
146+
}
147+
148+
.hourglass .hourglass-sand::before {
149+
top: 20px;
150+
transform: rotate(180deg);
151+
animation-delay: -4s;
152+
-webkit-transform: rotate(180deg);
153+
}
154+
155+
.hourglass .hourglass-stream {
156+
position: absolute;
157+
z-index: 2;
158+
left: 130px;
159+
width: 10px;
160+
height: 250px;
161+
opacity: 0;
162+
background: yellow;
163+
animation: hourglass-stream 8s linear 0.6s infinite;
164+
box-shadow: 0 3px 3px yellow,
165+
0 3px 5px yellow, 0 3px 3px yellow,
166+
0 4px 45px yellow, 0 3px 3px yellow,
167+
0 3px 30px yellow, 0 3px 3px yellow,
168+
0 3px 3px yellow, 0 3px 3px yellow,
169+
0 3px 31px yellow, 0 3px 3px yellow;
170+
}
171+
</style>
172+
<title>vue-typescript-music</title>
173+
</head>
174+
175+
<body>
176+
<noscript>
177+
<strong>We're sorry but vue-typescript-music doesn't work properly without JavaScript enabled. Please enable it to
178+
continue.</strong>
179+
</noscript>
180+
<div id="app"></div>
181+
<!-- built files will be auto injected -->
182+
<div id="first-loading">
183+
<div class="hourglass">
184+
<div class="hourglass-stand"></div>
185+
<div class="hourglass-sand"></div>
186+
<div class="hourglass-stream"></div>
187+
</div>
188+
</div>
189+
</body>
190+
191+
</html>

‎src/App.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,12 @@ import {
2525
}
2626
})
2727
export default class App extends Vue {
28+
created() {
29+
let first_loading = document.getElementById("first-loading");
30+
if (!!first_loading) {
31+
document.body.removeChild(<HTMLElement>first_loading);
32+
}
33+
}
2834
mounted() {
2935
document.body.style.margin = "0px";
3036
}

‎src/utils/mixin.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ export const userSongsManageMixin = {
113113
},
114114
computed: {
115115
userID(): number {
116-
return (this as any).$store.state.account && (this as any).$store.state.account.account.id
116+
return (this as any).$store.state.account.account && (this as any).$store.state.account.account.id || -1
117117
},
118118
// 我的歌单（排除 我喜欢） 我喜欢的歌单为用户歌单中第一个索引值
119119
mySongsList() {

‎src/views/find/childComp/find-swiper.vue

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,31 @@
11
<template>
2-
<swiper class="find-swiper" v-if="bannerlist && bannerlist.length != 0">
3-
<swiper-item class="find-swiper-item" v-for="item of bannerlist" :key="item.bannerId">
4-
<a :href="item.url">
5-
<img :src="item.pic" alt />
6-
</a>
7-
</swiper-item>
8-
</swiper>
2+
<div>
3+
<swiper class="find-swiper" v-if="bannerlist && bannerlist.length != 0">
4+
<swiper-item class="find-swiper-item" v-for="item of bannerlist" :key="item.bannerId">
5+
<a :href="item.url">
6+
<img :src="item.pic" alt />
7+
</a>
8+
</swiper-item>
9+
</swiper>
10+
<content-loader v-else secondaryColor="#edebec" :speed=1>
11+
<rect x="78" y="10" rx="0" ry="0" width="250" height="130"/>
12+
<rect x="40" y="18" rx="0" ry="0" width="233" height="114" />
13+
<rect x="5" y="25" rx="0" ry="0" width="213" height="99" />
14+
<rect x="127" y="18" rx="0" ry="0" width="233" height="114" />
15+
<rect x="181" y="25" rx="0" ry="0" width="213" height="99" />
16+
</content-loader>
17+
</div>
918
</template>
1019

1120
<script lang="ts">
21+
import { ContentLoader } from "vue-content-loader";
1222
import swiper from "components/common/swiper/Swiper.vue";
1323
import swiperItem from "components/common/swiper/SwiperItem.vue";
1424
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
1525
1626
@Component({
1727
components: {
28+
ContentLoader,
1829
swiper,
1930
swiperItem
2031
}

‎src/views/find/childComp/new-album.vue

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,44 @@
44
<span class="fl title">新碟</span>
55
<span class="fr more">更多新碟</span>
66
</div>
7-
<grid-view :cols="3" :v-margin="8">
8-
<div v-for="item of newalbumlist" :key="item.id" class="new-album-item" @click="goAlbumContent(item.id)">
9-
<!-- <span class="play-count">{{ item }}</span> -->
10-
<img v-lazy="item.picUrl" alt />
11-
<p class="name">{{ item.name }}</p>
12-
</div>
13-
</grid-view>
7+
<template v-if="newalbumlist.length!=0">
8+
<grid-view :cols="3" :v-margin="8">
9+
<div
10+
v-for="item of newalbumlist"
11+
:key="item.id"
12+
class="new-album-item"
13+
@click="goAlbumContent(item.id)"
14+
>
15+
<img v-lazy="item.picUrl" alt />
16+
<p class="name">{{ item.name }}</p>
17+
</div>
18+
</grid-view>
19+
</template>
20+
<ContentLoader v-else :speed="1" :height="350">
21+
<rect x="5" y="0" rx="0" ry="0" width="120" height="100" />
22+
<rect x="5" y="110" rx="0" ry="0" width="120" height="20" />
23+
<rect x="135" y="0" rx="0" ry="0" width="120" height="100" />
24+
<rect x="135" y="110" rx="0" ry="0" width="120" height="20" />
25+
<rect x="265" y="0" rx="0" ry="0" width="120" height="100" />
26+
<rect x="265" y="110" rx="0" ry="0" width="120" height="20" />
27+
<rect x="5" y="150" rx="0" ry="0" width="120" height="100" />
28+
<rect x="5" y="260" rx="0" ry="0" width="120" height="20" />
29+
<rect x="135" y="150" rx="0" ry="0" width="120" height="100" />
30+
<rect x="135" y="260" rx="0" ry="0" width="120" height="20" />
31+
<rect x="265" y="150" rx="0" ry="0" width="120" height="100" />
32+
<rect x="265" y="260" rx="0" ry="0" width="120" height="20" />
33+
</ContentLoader>
1434
</div>
1535
</template>
1636

1737
<script lang='ts'>
1838
import gridView from "components/common/gridview/grid-view.vue";
39+
import { ContentLoader } from "vue-content-loader";
1940
import { Component, Vue, Prop } from "vue-property-decorator";
2041
2142
@Component({
2243
components: {
44+
ContentLoader,
2345
gridView
2446
}
2547
})
@@ -30,8 +52,8 @@ export default class NewAlbum extends Vue {
3052
}
3153
})
3254
private newalbumlist!: object[];
33-
goAlbumContent(id:number){
34-
this.$router.push('/album/'+id)
55+
goAlbumContent(id: number) {
56+
this.$router.push("/album/" + id);
3557
}
3658
}
3759
</script>

0 commit comments

Comments
 (0)