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层,随其滚动,覆盖图片,往下滚动时候,图片随着展现出来的更多相关文章

  1. jquery 连写注释;siblings() 方法;jQuery 的3种滑动方法;slideUp()向上滑动;slideDown()向下滑动;slideToggle()来回滑动

    首先我们看两个连写注释 第一个:   /* 点击头像,显示基本资料 */ $(".f-chatTit a.avatar").click(function(){ $(this).hi ...

  2. css3+html5特效-向上滑动

    css+html5特效-向上滑动 效果描述:切换的下拉和上拉状态 鼠标悬浮:下拉鼠标离开:上拉 /*外容器设置*/ .box1{position:relative;top:100px;left:100 ...

  3. Android 去掉ScrollView、GridView、ListView向上 滑动时顶部的投影/阴影

    在ScrollView.GridView.ListView向上滑动的过程中,这些控件的顶部会出现一个系统默认的白色阴影,有些时候这个白色的阴影看上去好看,那么就需要除去. 去掉方法:在ScrollVi ...

  4. [ASP.NET] 如果将缓存“滑动过期时间”设置为1秒会怎样?

    今天编写了一个采用ASP.NET Caching的组件,在为它编写Unit Test的过程中发现了一个有趣的问题,接下来我通过一个简单的实例说明这个问题.我们在一个控制台应用中编写了如下一段程序,这个 ...

  5. 手指向上滑动跳转页面的JQ方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. iScroll.js 向上滑动异步加载数据回弹问题

    iScroll是一款用于移动设备web开发的一款插件.像缩放.下拉刷新.滑动切换等移动应用上常见的一些效果都可以轻松实现. 现在最新版本是5.X,官网这里:http://iscrolljs.com/ ...

  7. FMX StringGrid向上滑动自动加载记录(二)

    写完FMX StringGrid向上滑动自动加载记录(一)自己也觉得不理想,实现的别扭与复杂,现在找到更好的实现方法,原来,StringGrid从基类TCustomPresentedScrollBox ...

  8. eclipse快速复制一行代码(向下/向上)快捷键修改设置

    eclipse快速复制一行代码(向下/向上)快捷键修改设置 2015年10月05日 17:46:57 xiaoguanglgc 阅读数:20906 标签: eclipse快速复制一行快捷键冲突英特尔 ...

  9. h5页面ios,双击向上滑动,拖拽到底部还能继续拖拽(露出黑色背景)

    h5页面ios,双击向上滑动,拖拽到底部还能继续拖拽 标签: 手机 2016-02-02 18:09 696人阅读 评论(0) 收藏 举报   在ios下,双击屏幕某些地方,滚动条会自动向上走一段. ...

随机推荐

  1. node下使用jquery

    node使用jquery的两种方式 在node下,使用jquery有两种方法: 使用jsdom模拟一个window对象 使用cheerio,cheerio只实现了jquery的dom部分功能,相当于j ...

  2. windows修改环境变量

    windows的环境变量有两套: 系统的 当前用户的 不同的用户可以拥有不同的环境变量,当前用户的环境变量优先级比系统的环境变量优先级高,PATH环境变量比较特殊,它不是替换而是拼接. 在命令行下也可 ...

  3. 颜色传感器TCS230及颜色识别电路(转)

    摘要 TCS230是美国TAOS公司生产的一种可编程彩色光到频率的传感器.该传感器具有分辨率高.可编程的颜色选择与输出定标.单电源供电等特点:输出为数字量,可直接与微处理器连接.文中主要介绍TCS23 ...

  4. Nginx对某个目录或整个网站进行登录认证的方法

    比如要对 网站目录下的 test 文件夹 进行加密认证 首先需要在opt 的主目录中 /opt/ 创建一个新文件 htpasswd此文件的书写格式是用户名:密码每行一个账户并且 密码必须使用函数 cr ...

  5. 【MySQL】MySQL之MySQL5.7中文乱码

    自己的MySQL服务器不能添加中文,于是自己使用 show variables like 'character%'; 查看了当前的编码格式 我又通过以下方法将其设置为utf-8 SET charact ...

  6. Material DesignDrawerLayout的旋转箭头的实现方式。

    实际上,官方已经提供了实现方法,可是,有非常多捞偏门的教程,也有非常优秀的第三方.写出来.供还没找到的同学參考. 前提是:你对android.support.v7.widget.Toolbar已经有过 ...

  7. nmapport状态解析

  8. 跟我学SharePoint 2013视频培训课程——理解SharePoint网站的体系结构(3)

    课程简介 第三天,理解SharePoint 2013 网站的体系结构 视频 SharePoint 2013 交流群 41032413

  9. U811.1接口EAI系列之六--物料上传--VB语言

    1. 业务系统同步U811.1存货档案通用方法. 2.具体代码处理如下: 作者:王春天 2013-11-06 地址:http://www.cnblogs.com/spring_wang/p/34098 ...

  10. pycharm + selenium + python 提示 Unresolved reference 'webdriver' 解决办法

    尝试使用python + selenium + pycharm 做自动化测试, 命令行pip install selenium 安装了selenium.但是使用pycharm 新建一个测试项目后并新建 ...