码迷,mamicode.com
首页 > 其他好文 > 详细

当music-list向上滑动的时候,设置layer层,随其滚动,覆盖图片,往下滚动时候,图片随着展现出来

时间:2018-08-12 14:09:05      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:index   max   nsf   col   背景图   The   code   cli   web   

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         }

 

当music-list向上滑动的时候,设置layer层,随其滚动,覆盖图片,往下滚动时候,图片随着展现出来

标签:index   max   nsf   col   背景图   The   code   cli   web   

原文地址:https://www.cnblogs.com/yangguoe/p/9462425.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!