vue慕课网音乐项目手记：20-如何为betterScroll向上滚动的时候添加一个layer

需求：当歌曲列表向上滚动的时候，会跟着滚动。一直到标题的时候停止滚动。

1、首先应该为dom添加一个遮罩层，在scroll组件上面

<div class="bg-layer" ref="layer"></div>

.bg-layer
      position: relative
      height: 100%
      background: $color-background

2、既然想让list可以向上滚动，就要把list的overflow：hidden给去掉

3、并且我们需要获取向上滚动的高度：

        获取方法：

          created的时候，生成两变量，传递给scroll组件

created () {
    this.probeType = 3
    this.listenScroll = true
 },

4、scroll的事件如下：维护一个scrollY的变量，并记录滚动的高度

scroll (pos) {
      this.scrollY = pos.y
    }

5、设置layer组件的偏移高度：如下：

watch: {
    scrollY (newY) {
      let maxTranslate = Math.max(this.mintranslateY, newY)
      this.$refs.layer.style['transform'] = `translate3d(0, ${maxTranslate}px, 0)`
      this.$refs.layer.style['transform'] = `webkiTranslate3d(0, ${maxTranslate}px, 0)`
    }
  },

但是还有一个问题：就是到最上面的时候文字会遮盖到图片上面，这里怎么解决呢?

思路是这样的：

首先让高度到达最高的时候，改变bg-img的z-index，并且改变bg-img的高度。然后，当滚下来的时候，再恢复bg-img的样式。

代码如下:

scrollY (newY) {
      let maxTranslate = Math.max(this.mintranslateY, newY)
      let zIndex = 0
      this.$refs.layer.style['transform'] = `translate3d(0, ${maxTranslate}px, 0)`
      this.$refs.layer.style['transform'] = `webkiTranslate3d(0, ${maxTranslate}px, 0)`
      if (this.mintranslateY > newY) {
        zIndex = 10
        this.$refs.bgImage.style.paddingTop = 0
        this.$refs.bgImage.style.height = `${HEADER_HEIGHT}px`
      } else {
        this.$refs.bgImage.style.paddingTop = '70%'
        this.$refs.bgImage.style.height = 0
      }
      this.$refs.bgImage.style.zIndex = zIndex
    }

最后，给图片加一层filter

this.$refs.filter.style['backdrop-filter'] = `blur(${blur})px`
this.$refs.filter.style['webkitBackdrop-filter'] = `blur(${blur})px`