音乐排行榜动效

<template>
    <div class="box">
        <span class="title">排行榜</span>
        <div class="top" ref="bgImg">
            <!-- <span class="title">排行榜</span> -->
            <div class="playBtn" ref="playBtn">
                <span>随机播放全部</span>
            </div>
        </div>
        <div class="layer" ref="layer"></div>
        <div class="wrap-box" ref="wrapBox">
            <div class="scroll-box">
              <p v-for="(item, i) in Array(90)" :key="i">可滑动的内容</p>
            </div>
        </div>
    </div>
</template>
<style scoped>
.box{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #222;
}
.top{
  background-image: url("https://y.gtimg.cn/music/photo_new/T002R300x300M000001A3lWb4BibUN.jpg?max_age=2592000");
  background-repeat: no-repeat;
  height: 0;
  padding-top: 70%;
  width: 100%;
  position: relative;
  background-size: cover;
  transform-origin: top;
}
.title{
  position: absolute;
  top: 0;
  text-align: center;
  width: 100%;
  line-height: 40px;
  z-index: 200;
}
.playBtn{
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%
}
.wrap-box{
  position: fixed;
  bottom: 0;
  color: #ffffff;
  width: 100%;
  /* top: 290px; */
}
.layer{
  height: 100%;
  background-color: #222;
}
</style>
<script>
import BScroll from 'better-scroll'
// url("https://y.gtimg.cn/music/photo_new/T001R300x300M000002J4UUk29y8BY.jpg?max_age=2592000")
const RESERVED_Height = 40
export default {
    data () {
        return {
            scrollY: 0,
        }
    },
    mounted () {
     this.$nextTick(() => {
       // 动态计算高度
        this.imgH = this.$refs.bgImg.clientHeight
        document.getElementsByClassName('wrap-box')[0].style.top = this.imgH + 'px'
        // 
        this.minTranslateY = -this.imgH + RESERVED_Height
        // 初始化scroll
        this._initScroll()
     })
    },
    watch: {
      scrollY (newVal) {
        let zIndex = 0
        // 限制滚动的最上方是离top 40px 的位置，也滚动layer层
        let translateY = Math.max(this.minTranslateY, newVal)
        this.$refs.layer.style['transform'] = `translate3d(0,${translateY}px,0)`
        this.$refs.layer.style['webkitTransform'] = `translate3d(0,${translateY}px,0)`
        // 设置下拉的时候，头部图片也进行一个下拉的伸缩效果
        let scale = 1
        let percent = Math.abs(newVal / this.imgH)
        if(newVal > 0) {
          scale = 1 + percent
          zIndex = 10
        }
        this.$refs.bgImg.style['transform'] = `scale(${scale})`
        this.$refs.bgImg.style['webkitTransform'] = `scale(${scale})`

        // 设置top的z-index:10覆盖下面的滚动，解决内容滚动超过layer层
        // let zIndex = 0
        if(newVal < this.minTranslateY) {
          zIndex = 10
          this.$refs.bgImg.style.paddingTop = 0
          this.$refs.bgImg.style.height = `${RESERVED_Height}px`
           this.$refs.playBtn.style.display = 'none'       
        } else {
          this.$refs.bgImg.style.paddingTop = '70%'  //始终保持 10:7的比例
          this.$refs.bgImg.style.height = 0   
          this.$refs.playBtn.style.display = ''       
        }
        this.$refs.bgImg.style.zIndex = zIndex
      }
    },
    methods: {
        _initScroll () {
          this.scroll = new BScroll(this.$refs.wrapBox, {
            scrollY: true,
            probeType: 3,
            click: true
          })
          this.scroll.on('scroll', (pos) => {
            this.scrollY = pos.y
          })
        }
    }
}
</script>