computed: {

bgStyle() {

return `background-image:url(${this.bgImage})`

}

},

2.2 滚动列表

根据歌手查询到歌曲列表，需要滚动scroll.vue

@scroll="scroll" //需要派发滚动位置，触发的事件

:probe-type="probeType" //不需要截流

:listen-scroll="listenScroll" //派发滚动位置

:data="songs" //接收数据，初始化scroll

class="list"

ref="list">

2.3 滚动需求

为了能让他向上滚动，初始化的时候列表设置top值

mounted() {

//背景图图片的高度

this.imageHeight = this.$refs.bgImage.clientHeight

//滚动的边界：滚动到此 背景图片 ——(减去) 顶部title的高度

this.minTranslateY = -this.imageHeight + RESERVED_HEIGHT(40)

//初始化的时候列表设置top值：为了列表向上滚动而进行traslate3d

this.$refs.list.$el.style.top = `${this.$refs.bgImage.clientHeight}px`

},

左侧滚动

触发滚动事件

scroll(pos) {

this.scrollY = pos.y

},

监听滚动位置scrollY

watch: {

scrollY(newY) {

//往上滑动newY是负数 translateY往上移动是负数

//没有滑到临界值的时候translateY=newY 滑动顶部40的时候translateY=this.minTranslateY

let translateY = Math.max(this.minTranslateY, newY)

this.$refs.layer.style['transform'] = `translate3d(0, ${translateY}px,0)`

this.$refs.layer.style['webkitTransform'] = `translate3d(0, ${translateY}px,0)`

let zIndex = 0

//缩放

let scale = 1

//比例

let perscent = Math.abs(newY / this.imageHeight)

//高斯模糊

let blur = 0

//下拉的时候

if (newY > 0) {

scale = 1 + perscent

zIndex = 10

} else {

//上滑的时候：高斯模糊

blur = Math.min(20 * perscent, 20)

}

if (newY < this.minTranslateY) {

//上滑 `过` 临界值的时候，背景图片相应改变，按钮消失

zIndex = 10

this.$refs.bgImage.style.paddingTop = 0

this.$refs.bgImage.style.height = `${RESERVED_HEIGHT}px`

this.$refs.playButton.style.display = 'none'

} else {

//下滑 `未过` 临界值的时候

this.$refs.bgImage.style.paddingTop = '70%'

this.$refs.bgImage.style.height = '0'

this.$refs.playButton.style.display = ''

}

this.$refs.bgImage.style.zIndex = zIndex

//为什么从顶部显示scale缩放:因为下面的CSS .bg-image中 transform-origin: top

//下拉的时候放大效果

this.$refs.bgImage.style[transform] = `scale(${scale})`

//高斯模糊 IOS

this.$refs.bgImage.style[backdrop] = `blur(${blur}px)`

}

},

3.浏览器前缀

在使用transform以及back-drop的时候，需要根绝浏览器添加一些前缀，封装成方法调用

let elementStyle = document.createElement('div').style

//自执行函数：浏览器兼容的前缀

let vender = (() => {

const tranforNames = {

webkit:'webkitTransfrom',

Moz:'MozTransfrom',

O:'OTransfrom',

ms:'msTransfrom',

standard:'standard'

}

for(let key in transforNames){

if(elementStyle[transfromNames[key]] !== undefined){

return key

}

}

return false

})()

export function prefixStyle(style){

if(vendor === false){

return false

}

if(ventor === 'standard'){

return style

}

return vendor + style.charAt(0).toUpperCase() + style.substr(1)

}

在music-list.vue中引入

const transform = prefixStyle('transform')

4.song-list.vue

列表很常见，封装成组件song-list.vue

传入songs数据

功能：展示数据，传出点击的数据

methods:{

getDesc(song) {

return `${song.singer} . ${song.album}`

},

selectItem(item, index) {

this.$emit('select', item, index)

},

}