<template>
<div class="music-list">
<div class="back" @click="back">
<i class="icon-back"></i>
</div>
<h1 class="title" v-html="title"></h1>
<div class="bg-image" :style="bgStyle" ref="bgImage">
<div class="play-wrapper">
<div class="play" v-show="songs.length>0" ref="playBtn" @click="playRandom">
<i class="icon-play"></i>
<span class="text">随机全部播放</span>
</div>
</div>
<div class="filter" ref="filter"></div>
</div>
<div class="bg-layer" ref="layer"></div>
<scroll :data="songs" @scroll="scroll" :probe-type="probeType" :listern-scroll="listernScroll" class="list" ref="list">
<div class="song-list-wrapper">
<song-list :songs="songs" :rank="rank" @select="selectItem"></song-list>
</div>
<div class="loading-container" v-show="!songs.length">
<loading></loading>
</div>
</scroll>
</div>
</template>
<script>
import Scroll from '../../base/scroll/scroll'
import SongList from '../../base/song-list/song-list'
import {preFixStyle} from '../../common/js/mdom'
import Loading from '../../base/loading/loading'
import {mapActions} from 'vuex'
import {playlistMixin} from 'common/js/mixin'
const RESERVED_HEIGHT = 40 // 头部流出的距离
const transform = preFixStyle('transform')
export default {
mixins: [playlistMixin],
props: {
bgImage: {
type: String, // 实际上是图像的链接地址 所以要通过计算属性 获得完整图片
default: ''
},
songs: {
type: Array,
default: () => {
return []
}
},
title: {
type: String,
default: ''
},
rank: {
type: Boolean,
default: false
}
},
data () {
return {
scrollY: 0
}
},
mounted () {
// 动态计算listtop值
// console.log(this.$refs.list) style在$el中
this.imgHeight = this.$refs.bgImage.clientHeight
this.minHeight = -this.$refs.bgImage.clientHeight + RESERVED_HEIGHT
this.$refs.list.$el.style.top = `${this.imgHeight}px` // 因为list是个组件,所以他的style在$el中
},
created () {
this.probeType = 3
this.listernScroll = true
},
methods: {
handlePlayList (playList) {
const bottom = playList.length > 0 ? '60px' : ''
this.$refs.list.$el.style.bottom = bottom
this.$refs.list.refresh()
},
scroll (position) {
this.scrollY = position.y // 滚动的y坐标
},
back () {
this.$router.back() // 通过路由返回上级路由
},
selectItem (item, index) {
this.selectPlay({
list: this.songs,
index
})
},
playRandom () {
this.randomPlay({
list: this.songs
})
},
...mapActions([
'selectPlay', // 调用action中的方法
'randomPlay'
])
},
watch: {
scrollY (newY) {
let translateY = Math.max(this.minHeight, newY)
let zIndex = 0
let scale = 1
let blur = 0 // 模糊度
// 添加一个遮罩层,用来调节背景图的高度。它发生变化,它下面的list也跟着变化
this.$refs.layer.style[transform] = `translate3d(0, ${translateY}px, 0)`
// this.$refs.layer.style['webkitTransform'] = `translate3d(0, ${translateY}px, 0)`
const percent = Math.abs(newY / this.imgHeight) // 计算出下滑与图片背景的比例
if (newY > 0) { // 往下滑
scale = 1 + percent // 缩放
zIndex = 10
} else {
blur = Math.min(100 * percent, 100) // 最小模糊度为20
}
this.$refs.filter.style['backdrop-filter'] = `blur(${blur}px)`
this.$refs.filter.style['filter'] = `blur(${blur}px)`
// this.$refs.filter.style['filter'] = `contrast(${blur}%)`
this.$refs.filter.style['webkitFilter'] = `blur(${blur}px)`
if (newY < this.minHeight) { // 往上滑
zIndex = 10
this.$refs.bgImage.style.paddingTop = 0 // 通过padding-top设置高度
this.$refs.bgImage.style.height = `${RESERVED_HEIGHT}px`
this.$refs.playBtn.style.display = 'none'
} else {
this.$refs.bgImage.style.paddingTop = '70%' // 通过padding-top设置高度
this.$refs.bgImage.style.height = 0
this.$refs.playBtn.style.display = 'block'
}
this.$refs.bgImage.style.zIndex = zIndex // 改变背景图的zindex
this.$refs.bgImage.style[transform] = `scale(${scale})` // scale缩放比例 详情见transform:scale()
// this.$refs.bgImage.style['webkitTransform'] = `scale(${scale})`
}
},
computed: {
bgStyle () {
return `background-image: url(${this.bgImage})` // 通过属性给dom动态添加背景图
}
},
components: {
Scroll,
SongList,
Loading
}
}
</script>
<style lang="stylus">
@import "~common/stylus/variable"
@import "~common/stylus/mixin"
.music-list
position: fixed
z-index: 100
top: 0
left: 0
bottom: 0
right: 0
background: $color-background
.back
position absolute
top: 0
left: 6px
z-index: 50
.icon-back
display: block
padding: 10px
font-size: $font-size-large-x
color: $color-theme
.title
position: absolute
top: 0
left: 10%
z-index: 40
width: 80%
no-wrap()
text-align: center
line-height: 40px
font-size: $font-size-large
color: $color-text
.bg-image
position: relative
width: 100%
height: 0
padding-top: 70%
transform-origin: top // 基准点 transform-origin
background-size: 100%
.play-wrapper
position: absolute
bottom: 20px
z-index: 50
width: 100%
.play
box-sizing: border-box
width: 135px
padding: 7px 0
margin: 0 auto
text-align: center
border: 1px solid $color-theme
color: $color-theme
border-radius: 100px
font-size: 0
.icon-play
display: inline-block
vertical-align: middle
margin-right: 6px
font-size: $font-size-medium-x
.text
display: inline-block
vertical-align: middle
font-size: $font-size-small
.filter
position: absolute
top: 0
left: 0
width: 100%
height: 100%
background: rgba(7, 17, 27, 0.4)
background-size: cover
.bg-layer
position: relative
height: 100%
background: $color-background
.list
position: fixed
top: 0
bottom: 0
width: 100%
// z-index -10
background: $color-background
.song-list-wrapper
padding: 20px 30px
.loading-container
position: absolute
width: 100%
top: 50%
transform: translateY(-50%)
</style>
主要是滑动歌曲list时的交互逻辑需要多多注意
vuex中actions:
// 点击播放:分两种情况: 顺序/随机
export const selectPlay = function ({commit, state}, {list, index}) {
commit(types.SET_SEQUENCELIST, list) // 映射到state
if (state.mode === playMode.random) {
let randomList = shuffle(list) // 洗牌函数,彻底打乱,返回一个新数组
commit(types.SET_PLAY_LIST, randomList)
index = findIndex(randomList, list[index]) // 从数组中寻找该item,并返回其index
} else {
commit(types.SET_PLAY_LIST, list) // 顺序播放
}
commit(types.CURRENTINDEX, index)
commit(types.SET_PLAY_SCREEN, true)
commit(types.SET_PLAYING_STATE, true)
}
//随机播放模式
export const randomPlay = function ({commit}, {list}) {
commit(types.MODE, playMode.random)
commit(types.SET_SEQUENCELIST, list)
let randomList = shuffle(list)
commit(types.CURRENTINDEX, 0)
commit(types.SET_PLAY_LIST, randomList)
commit(types.SET_PLAY_SCREEN, true)
commit(types.SET_PLAYING_STATE, true)
}
shuffle洗牌函数
function getRandom (min, max) { // 获得min max之间的随机整数
return Math.floor(Math.random() * (max - min + 1) + min) // (max - min + 1) 为了保证能取到max
}
export function shuffle (arr) {
let _arr = arr.slice() // 返回一个新数组 以便于不改变原数组
for (let i = 0; i < _arr.length; i++) {
let j = getRandom(0, i)
let t = _arr[i]
_arr[i] = _arr[j]
_arr[j] = t
}
return _arr
}
function findIndex (list, song) {
return list.findIndex((item) => { // es6 api 返回index序号 如果返回-1表示没有
return item.id === song.id
})
}