1.music-list.vue
props 接收的数据
props: {
bgImage: {
type: String,
default: ''
},
songs: {
type: Array,
default: []
},
title: {
type: String,
default: ''
},
rank: {
type: Boolean,
default: false
}
},
2.使用music-list组件
<music-list :title="title" :bg-image="bgImage" :songs="songs"></music-list>
import MusicList from 'components/music-list/music-list'
在计算属性里面
title() {
return this.singer.name
},
bgImage() {
return this.singer.avatar
},
3.抽象出songList组件
<template>
<div class="song-list">
<ul>
<li @click="selectItem(song, index)" class="item" v-for="(song, index) in songs">
<div class="rank" v-show="rank">
<span :class="getRankCls(index)" v-text="getRankText(index)"></span>
</div>
<div class="content">
<h2 class="name">{{song.name}}</h2>
<p class="desc">{{getDesc(song)}}</p>
</div>
</li>
</ul>
</div>
</template>
methods: {
selectItem(item, index) {
this.$emit('select', item, index)
},
getDesc(song) {
return `${song.singer}·${song.album}`
},
getRankCls(index) {
if (index <= 2) {
return `icon icon${index}`
} else {
return 'text'
}
},
getRankText(index) {
if (index > 2) {
return index + 1
}
}
}
music-list
1.应用Bsroll
2.应用SongList
<scroll :data="songs" @scroll="scroll"
:listen-scroll="listenScroll" :probe-type="probeType" class="list" ref="list">
<div class="song-list-wrapper">
<song-list :songs="songs" :rank="rank" @select="selectItem"></song-list>
</div>
<div v-show="!songs.length" class="loading-container">
<loading></loading>
</div>
</scroll>
此时头像不显示
<div class="bg-image" :style="bgStyle" ref="bgImage">
<div class="play-wrapper">
<div ref="playBtn" v-show="songs.length>0" class="play" @click="random">
<i class="icon-play"></i>
<span class="text">随机播放全部</span>
</div>
</div>
<div class="filter" ref="filter"></div>
</div>
mounted() {
this.$refs.list.$el.style.top = `${this.imageHeight}px`
},