zoukankan      html  css  js  c++  java
  • 当music-list向上滑动的时候,设置layer层,随其滚动,覆盖图片,往下滚动时候,图片随着展现出来

    1.layer层代码:

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

    2.在mounted()的时候,获取图片的高度,并获得其滚动最小高度,即图片的高度-预留的高度;

    1  mounted(){//因为上面的背景图的高度是和宽度保持着10:7的比例,因此,不同浏览器下高度不一样,下面的song-list高度也不一样,需要计算得出;
    2         this.imageHeight = this.$refs.bgImage.clientHeight//得到的是上面图片的高度
    3         this.minTranslateY = -this.imageHeight+RESERVED_HEIGHT
    4         this.$refs.songScrollList.$el.style.top = `${this.imageHeight}px`
    5     
    6       },

    3.监听ScrollY:

     1  scrollY(newY){
     2           let translateY = Math.max(this.minTranslateY,newY)
     3           let zIndex = 0;
     4           this.$refs.layer.style['transform'] = `translate3d(0,${translateY}px,0)`
     5           this.$refs.layer.style['webkittransform']  = `translate3d (0,${translateY}px,0)`
     6           if(newY <this.minTranslateY){//还没有移动到顶部的时候
     7               zIndex = 10
     8              this.$refs.bgImage.style.paddingTop = 0;
     9               this.$refs.bgImage.style.height = `${RESERVED_HEIGHT}px`
    10           }else{
    11             this.$refs.bgImage.style.paddingTop = '70%'
    12             this.$refs.bgImage.style.height = 0;
    13           }
    14           this.$refs.bgImage.style.zIndex = zIndex
    15         }
  • 相关阅读:
    Hibernate缓存机制
    如何建立索引
    数据库索引及基本优化入门
    索引优化-2
    索引优化-1
    Linux基本命令参数
    Spring 依赖注入(控制反转)介绍
    Linux的软连接和硬连接
    聚簇索引(Clustered Index)和非聚簇索引 (Non- Clustered Index)
    常见和链表相关的算法
  • 原文地址:https://www.cnblogs.com/yangguoe/p/9462425.html
Copyright © 2011-2022 走看看