vue滚动列表嵌套

如图vue实现滚动列表中嵌套图片，且图片可被遮挡

整个页面布局如下：

布局代码如下：

.music-list
    position: fixed
    z-index: 100
    top: 0
    left: 0
    bottom: 0
    right: 0
    background: $color-background
    .back
      position absolute
      top: 0
      left: 6px
      z-index: 50
      .icon-back
        display: block
        padding: 10px
        font-size: $font-size-large-x
        color: $color-theme
    .title
      position: absolute
      top: 0
      left: 10%
      z-index: 40
      width: 80%
      no-wrap()
      text-align: center
      line-height: 40px
      font-size: $font-size-large
      color: $color-text
    .bg-image
      position: relative
      width: 100%
      height: 0
      padding-top: 70%
      transform-origin: top
      background-size: cover
      .play-wrapper
        position: absolute
        bottom: 20px
        z-index: 50
        width: 100%
        .play
          box-sizing: border-box
          width: 135px
          padding: 7px 0
          margin: 0 auto
          text-align: center
          border: 1px solid $color-theme
          color: $color-theme
          border-radius: 100px
          font-size: 0
          .icon-play
            display: inline-block
            vertical-align: middle
            margin-right: 6px
            font-size: $font-size-medium-x
          .text
            display: inline-block
            vertical-align: middle
            font-size: $font-size-small
      .filter
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        background: rgba(7, 17, 27, 0.4)
    .bg-layer
      position: relative
      height: 100%
      background: $color-background
    .list
      position: fixed
      top: 0
      bottom: 0
      width: 100%
      background: $color-background
      .song-list-wrapper
        padding: 20px 30px
      .loading-container
        position: absolute
        width: 100%
        top: 50%
        transform: translateY(-50%)

最外层music-list使用fixed布局top: 0，left: 0，bottom: 0，right: 0能够最外层铺满屏幕，back和title均使用绝对定位，随之拖动的底层bg-layer使用relative定位，高度占bg-image剩下的所有高度。

1 拖动时背景层随之拖动
拖动时监听scroll事件，然后设置相关bg-layer的高度

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

2 往下拖动图片放大

const percent = Math.abs(newY / this.imageHeight)
if(newY > 0) {
        scale = 1 + percent
        zIndex = 10
      }else {
        blur = Math.min(20 * percent, 20)
      }


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

往下拖动时设置scale等于1加拖动距离与宽比，相应扩大。transform-origin: top设置扩大以顶部为中心，background-size: cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

3 往上滑动

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 = ''
}

当滑动距离太长时，要保证图片不能被全部遮住，方法就是设置z-index值，当未遮住时要恢复原值。