1、首先看先要实现的功能和界面
2、具体分析
(1)返回按钮,可以在其元素上面绑定click事件back函数,在methods中定义back函数。即可实现后退功能
<div class="back" @click="back">
<i class="icon-back"></i>
</div>
methods: {
back() {
this.$router.back()
}
}
(2)、图片上拉消失、下拉放大。可以通过高斯模糊backdrop-filter,判断newY的大小来实现,通过计算newY占图片高度的百分比来实现图片的放大效果。
(3)、随机播放按钮。判读newY来控制display为none还是block
(4)、引入better-scroll组件来进行控制,添加一个layer层实现过渡效果
由于2、3、4代码基本都在一块,因此全部贴了出来,有不懂的朋友可以添加好友交流。
<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" ref="playBtn">
<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 @scroll="scroll" listen-scroll="listenScroll" :probe-type="probeType" :data="songs" class="list" ref="list">
<div class="song-list-wrapper">
<song-list :songs="songs"></song-list>
</div>
<div class="loading-container" v-show="!songs.length">
<loading></loading>
</div>
</scroll>
</div>
</template>
export default {
props: {
bgImage: {
type: String,
default: ''
},
songs: {
type: Array,
default: []
},
title: {
type: String,
default: ''
}
},
computed: {
bgStyle() {
return `background-image:url(${this.bgImage})`
}
},
created() {
this.probeType = 3
this.listenScroll = true
},
data() {
return {
scrollY: 0
}
},
mounted() {
this.imageHeight = this.$refs.bgImage.clientHeight
this.minTranslateY = -this.imageHeight + RESERVED_HEIGHT
this.$refs.list.$el.style.top = `${this.imageHeight}px`
},
methods: {
scroll(pos) {
this.scrollY = pos.y
},
back() {
this.$router.back()
}
},
watch: {
scrollY(newY) {
let translateY = Math.max(this.minTranslateY, newY)
let zIndex = 0
let scale = 1
let blur = 0
this.$refs.layer.style[transform] = `translate3d(0,${translateY}px,0)`
const percent = Math.abs(newY / this.imageHeight)
if (newY > 0) {
scale = 1 + percent
zIndex = 10
} else {
blur = Math.min(20 * percent, 20)
}
this.$refs.filter.style[backdrop] = `blur(${blur}px)`
if (newY < this.minTranslateY) {
zIndex = 10
this.$refs.playBtn.style.display = 'none'
this.$refs.bgImage.style.paddingTop = 0
this.$refs.bgImage.style.height = `${RESERVED_HEIGHT}px`
} else {
this.$refs.playBtn.style.display = ''
this.$refs.bgImage.style.paddingTop = '70%'
this.$refs.bgImage.style.height = 0
}
this.$refs.bgImage.style.zIndex = zIndex
this.$refs.bgImage.style[transform] = `scale(${scale})`
}
},
components: {
Scroll,
SongList,
Loading
}
}