1.layer层代码:
<div class="bg-layer" ref="layer"></div>
2.在mounted()的时候,获取图片的高度,并获得其滚动最小高度,即图片的高度-预留的高度;
mounted(){//因为上面的背景图的高度是和宽度保持着10:7的比例,因此,不同浏览器下高度不一样,下面的song-list高度也不一样,需要计算得出;
this.imageHeight = this.$refs.bgImage.clientHeight//得到的是上面图片的高度
this.minTranslateY = -this.imageHeight+RESERVED_HEIGHT
this.$refs.songScrollList.$el.style.top = `${this.imageHeight}px` },
3.监听ScrollY:
scrollY(newY){
let translateY = Math.max(this.minTranslateY,newY)
let zIndex = 0;
this.$refs.layer.style['transform'] = `translate3d(0,${translateY}px,0)`
this.$refs.layer.style['webkittransform'] = `translate3d (0,${translateY}px,0)`
if(newY <this.minTranslateY){//还没有移动到顶部的时候
zIndex = 10
this.$refs.bgImage.style.paddingTop = 0;
this.$refs.bgImage.style.height = `${RESERVED_HEIGHT}px`
}else{
this.$refs.bgImage.style.paddingTop = '70%'
this.$refs.bgImage.style.height = 0;
}
this.$refs.bgImage.style.zIndex = zIndex
}