Skip to content

Commit

Permalink
add loaidng animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@hua1995116
hua1995116 committed Mar 29, 2017
1 parent 768912b commit a01644b
Show file tree
Hide file tree
Showing 7 changed files with 403 additions and 100 deletions.
214 changes: 125 additions & 89 deletions .idea/workspace.xml
View file

Large diffs are not rendered by default.

6 changes: 2 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
#musiccloudWebapp
## Build Setup

# install dependencies
npm install
Expand All @@ -7,6 +7,4 @@ npm install
npm run dev

# build for production with minification
npm run build

The online demo [http://qiufengh.com:8080/](http://qiufengh.com:8080/)
npm run build
261 changes: 261 additions & 0 deletions src/components/Index.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,261 @@
<template>
<div style="width: 100%;height: 100%;">
<div class="hello-wrapper" ref="helloWrapper">
<div class="hello">
<div class="swipe-wrapper">
<swipe class="my-swipe">
<swipe-item class="slide1">
<img src="../assets/1.png" alt="">
</swipe-item>
<swipe-item class="slide2">
<img src="../assets/2.png" alt="">
</swipe-item>
<swipe-item class="slide3">
<img src="../assets/3.png" alt="">
</swipe-item>
<swipe-item class="slide3">
<img src="../assets/4.png" alt="">
</swipe-item>
<swipe-item class="slide3">
<img src="../assets/5.png" alt="">
</swipe-item>
<swipe-item class="slide3">
<img src="../assets/6.png" alt="">
</swipe-item>
<swipe-item class="slide3">
<img src="../assets/7.png" alt="">
</swipe-item>
<swipe-item class="slide3">
<img src="../assets/8.png" alt="">
</swipe-item>
</swipe>
</div>
<div class="cards border-1px">
<div class="card-li">
<div class="circle">
</div>
<p>私人FM</p>
</div>
<div class="card-li">
<div class="circle">
<span>20</span>
</div>
<p>每日歌曲推荐</p>
</div>
<div class="card-li">
<div class="circle">
</div>
<p>云音乐热歌榜</p>
</div>
</div>
<!--<div class="height">-->
<!---->
<!--</div>-->
<div class="music-list">
<musictitle :info="info" ></musictitle>
<ul class="list-ul">
<li v-for="item in music" @click="openmenuTotal(item)">
<img v-lazy="item.coverImgUrl" alt=""/>
<div class="item-content">
{{item.name}}
</div>
</li>
</ul>
<div class="loading" v-show="loading">
<img src="../../static/img/rage_loading.png" alt="" width=100 height=100>
</div>
</div>
</div>
</div>
<musicmenu ref="musicmenu" v-on:openmusicsong="show"></musicmenu>
<Musicsong ref="musicsong"></Musicsong>
</div>
</template>

<script>
import { Swipe, SwipeItem } from 'vue-swipe';
import BScroll from 'better-scroll';
import Musictitle from './Musictitle/Musictitle.vue';
import Musicmenu from './Musicmenu/Musicmenu.vue';
import Musicsong from './Musicsong/Musicsong.vue';
// import data from '../../data.json';
import api from '../api';
export default {
name: 'hello',
data() {
return {
music: {},
info: {
src: '../../../static/img/aei.png',
content: '推荐歌单'
},
loading: false
};
},
created() {
this.get();
// this.music = data.music;
},
methods: {
get() {
this.loading = true;
this.$http.get(api.getPlayListByWhere('全部', 'hot', 0, true, 9)).then((res) => {
this.music = res.data.playlists;
this.$nextTick(() => {
this._initScroll();
});
this.loading = false;
});
},
_initScroll() {
if (!this.helloScroll) {
this.helloScroll = new BScroll(this.$refs.helloWrapper, {
click: true
});
} else {
this.helloScroll.refresh();
}
},
openmenuTotal: function (item) {
this.$refs.musicmenu.show();
this.$refs.musicmenu.setmusiclist(item);
},
show: function (item) {
this.$refs.musicsong.show(item);
}
},
components: {
Swipe,
SwipeItem,
Musictitle,
Musicmenu,
Musicsong
}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import "../common/stylus/mixin.styl";
img[lazy=error]
transition: all 0.5s
width: 100%
img[lazy=loading]
transition: all 0.5s
width: 100%
img[lazy=loaded]
transition: all 0.5s
width: 100%
animation: fade 0.5s
@keyframes fade
0%{
opacity: 0
}
100%{
opacity: 1
}
@-webkit-keyframes rotating{
0% {
-webkit-transform:rotate(0deg)
}
100% {
-webkit-transform:rotate(360deg)
}
}
@keyframes rotating {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
.hello-wrapper
width: 100%
position: absolute
top:87px
bottom:0
overflow: hidden
background:#fff
.my-swipe
height: 139px
color: #fff
font-size: 30px
text-align: center
img
width: 100%
.cards
border-1px(#ddd)
.card-li
display: inline-block
width: 30%
margin-left: 2.5%
margin-top: 10px
margin-bottom: 10px
.circle
position: relative;
width: 58%
margin: 0 auto
height: 0
padding-top: 58%
border-radius: 50%
border: 1px solid #d33a31
span
position: absolute
left: 50%
top:50%
margin-left: -15px
margin-top: -15px
width: 30px
height: 30px
line-height: 30px
text-align: center
font-size: 20px
color: #d33a31
p
color: #333
font-size: 10px
text-align: center
margin-top: 5px
.card-li:nth-child(1)
.circle
background: url(../assets/FM.png) no-repeat
background-size:50px 50px
background-position: center
.card-li:nth-child(3)
.circle
background: url(../assets/ph.png) no-repeat
background-size:50px 50px
background-position: center
.music-list
.loading
width:100px
height: 100px
margin:10px auto 0 auto
img
-webkit-animation: rotating 3s linear .3s infinite
animation: rotating 3s linear .3s infinite
.list-ul li
/*float: left;*/
min-height: 154px
display: inline-block
width: 30%
margin-left: 2.5%
margin-bottom: 2.5%
box-sizing: border-box
vertical-align: top
img
width: 100%
.item-content
height: 38px
word-wrap:break-word
overflow: hidden
display: -webkit-box
text-overflow:ellipsis
-webkit-line-clamp:2
-webkit-box-orient: vertical
font-size: 12px
color:#333
line-height: 1.5
letter-spacing: 1px
</style>
16 changes: 12 additions & 4 deletions src/components/Musicsong/Musicsong.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -472,12 +472,20 @@
span
color: #333
@-webkit-keyframes rotating{
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
0% {
-webkit-transform:rotate(0deg)
}
100% {
-webkit-transform:rotate(360deg)
}
}
@keyframes rotating {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
.cd-rotate
-webkit-animation: rotating 10s linear .3s infinite
Expand Down
4 changes: 2 additions & 2 deletions src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import Router from 'vue-router';
import Music from './components/Music';
import Rank from './components/Rank';
import Station from './components/Station';
import Hello from './components/Hello';
import Index from './components/Index';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

Expand All @@ -28,7 +28,7 @@ Vue.use(Router);

const routes = [{
path: '/',
component: Hello
component: Index
}, {
path: '/music',
component: Music
Expand Down
Binary file added static/img/rage_loading.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion test/unit/specs/Hello.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Vue from 'vue'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
import Hello from '@/components/Hello'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}

describe('Hello.vue', () => {
describe('index.vue', () => {
it('should render correct contents', () => {
const Constructor = Vue.extend(Hello){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
const vm = new Constructor().$mount(){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
Expand Down

0 comments on commit a01644b

Please sign in to comment.