如圖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: 10
 
px
        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: 135
 
px
          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值，當未遮住時要恢復原值。