当music-list向上滑动的时候,设置layer层,随其滚动,覆盖图片,往下滚动时候,图片随着展现出来
1.layer层代码:
<div class="bg-layer" ref="layer"></div>
2.在mounted()的时候,获取图片的高度,并获得其滚动最小高度,即图片的高度-预留的高度;
mounted(){//因为上面的背景图的高度是和宽度保持着10:7的比例,因此,不同浏览器下高度不一样,下面的song-list高度也不一样,需要计算得出;
this.imageHeight = this.$refs.bgImage.clientHeight//得到的是上面图片的高度
this.minTranslateY = -this.imageHeight+RESERVED_HEIGHT
this.$refs.songScrollList.$el.style.top = `${this.imageHeight}px`
},
3.监听ScrollY:
scrollY(newY){
let translateY = Math.max(this.minTranslateY,newY)
let zIndex = 0;
this.$refs.layer.style['transform'] = `translate3d(0,${translateY}px,0)`
this.$refs.layer.style['webkittransform'] = `translate3d (0,${translateY}px,0)`
if(newY <this.minTranslateY){//还没有移动到顶部的时候
zIndex = 10
this.$refs.bgImage.style.paddingTop = 0;
this.$refs.bgImage.style.height = `${RESERVED_HEIGHT}px`
}else{
this.$refs.bgImage.style.paddingTop = '70%'
this.$refs.bgImage.style.height = 0;
}
this.$refs.bgImage.style.zIndex = zIndex
}
当music-list向上滑动的时候,设置layer层,随其滚动,覆盖图片,往下滚动时候,图片随着展现出来的更多相关文章
- jquery 连写注释;siblings() 方法;jQuery 的3种滑动方法;slideUp()向上滑动;slideDown()向下滑动;slideToggle()来回滑动
首先我们看两个连写注释 第一个: /* 点击头像,显示基本资料 */ $(".f-chatTit a.avatar").click(function(){ $(this).hi ...
- css3+html5特效-向上滑动
css+html5特效-向上滑动 效果描述:切换的下拉和上拉状态 鼠标悬浮:下拉鼠标离开:上拉 /*外容器设置*/ .box1{position:relative;top:100px;left:100 ...
- Android 去掉ScrollView、GridView、ListView向上 滑动时顶部的投影/阴影
在ScrollView.GridView.ListView向上滑动的过程中,这些控件的顶部会出现一个系统默认的白色阴影,有些时候这个白色的阴影看上去好看,那么就需要除去. 去掉方法:在ScrollVi ...
- [ASP.NET] 如果将缓存“滑动过期时间”设置为1秒会怎样?
今天编写了一个采用ASP.NET Caching的组件,在为它编写Unit Test的过程中发现了一个有趣的问题,接下来我通过一个简单的实例说明这个问题.我们在一个控制台应用中编写了如下一段程序,这个 ...
- 手指向上滑动跳转页面的JQ方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- iScroll.js 向上滑动异步加载数据回弹问题
iScroll是一款用于移动设备web开发的一款插件.像缩放.下拉刷新.滑动切换等移动应用上常见的一些效果都可以轻松实现. 现在最新版本是5.X,官网这里:http://iscrolljs.com/ ...
- FMX StringGrid向上滑动自动加载记录(二)
写完FMX StringGrid向上滑动自动加载记录(一)自己也觉得不理想,实现的别扭与复杂,现在找到更好的实现方法,原来,StringGrid从基类TCustomPresentedScrollBox ...
- eclipse快速复制一行代码(向下/向上)快捷键修改设置
eclipse快速复制一行代码(向下/向上)快捷键修改设置 2015年10月05日 17:46:57 xiaoguanglgc 阅读数:20906 标签: eclipse快速复制一行快捷键冲突英特尔 ...
- h5页面ios,双击向上滑动,拖拽到底部还能继续拖拽(露出黑色背景)
h5页面ios,双击向上滑动,拖拽到底部还能继续拖拽 标签: 手机 2016-02-02 18:09 696人阅读 评论(0) 收藏 举报 在ios下,双击屏幕某些地方,滚动条会自动向上走一段. ...
随机推荐
- Swift打印Debug日志,实现Release下不打印
OC内,我们往往做log打印时,会考虑一个Debug环境下打印,Release下控制不打印,以节约性能消耗. OC我们可以这样做: 在pch文件内,定义如下: //打印日志 #ifdef DEBUG ...
- hibernate的hql语句不支持 count(case...when ....else..)?
查看帖子:http://www.iteye.com/problems/4499 第一次这么写, 不行, 关键就是: 同是聚集函数,sum 就OK, 而 count 就不行...........后来还是 ...
- intellij idea强制更新索引
intellij idea使用时间长了,许多包安了又卸.卸了又安,导致索引文件有些不正常. 删除~/.Intellij Idea/下的index和cache即可彻底更新.
- hihocoder216周:贪心或二分
题目链接 有N条线段,要切K刀,使得最长的线段尽量短.在最佳切割的条件下,切完之后最长的那根绳子是多长. 方法一:贪心 每次切的那一刀必然是最长的那条线段,用优先队列,每次往最长的那条线段上切一刀 方 ...
- lucene之中文分词及其高亮显示
参考:http://www.cnblogs.com/lirenzhujiu/p/5914174.html http://www.cnblogs.com/xing901022/p/3933675.htm ...
- memcached全面剖析--2.理解memcached的内存存储
下面是<memcached全面剖析>的第二部分. 发表日:2008/7/9 作者:前坂徹(Toru Maesaka) 原文链接:http://gihyo.jp/dev/feature/01 ...
- Windows 10安装DockerToolBox失败处理方法
指令运行报错: Windows 10安装DockerToolBox失败处理方法:升级Windows 10. (注意:只有Windows10 专业版才支持升级,Server和企业版无效)
- C# 两个时间相减 返回 对应天时分秒
"; //string sdsdsdsds = "1"; , '); //不足2位 就补充0 足2位 就不变 DateTime dts1 = DateTime.Now; ...
- 基于matplotlib的数据可视化 - 笔记
1 基本绘图 在plot()函数中只有x,y两个量时. import numpy as np import matplotlib.pyplot as plt # 生成曲线上各个点的x,y坐标,然后用一 ...
- java 高性能读模式(译)
原文地址:http://tutorials.jenkov.com/java-performance/read-patterns.html 好久没翻译了,逛知乎,无意间发现的一个链接,写的太好了,而且内 ...