当我们将音乐列表往上滑的时候   我们上面的歌手图片部分也会变小
当我们将音乐列表向下拉的时候   我们的图片会放大
当我们将音乐列表向上滑的时候   我们的图片有一个高斯模糊的效果 并且随着我们的列表向上滑动的越多  图片越模糊
封装prefix  避免写太多的兼容性
 
 由于歌曲列表  排行榜列表 歌单列表样式差不多  所以我们做一个list-view的组件  方便复用

第一步：将从父组件页面中接受需要用到的数据

将接受到的这些数据应用在页面中

背景图：

  

音乐列表的位置

设置scroll

 

用Vue来实现音乐播放器（二十三）：音乐列表的更多相关文章

  1. iOS之基于FreeStreamer的简单音乐播放器(模仿QQ音乐)

    代码地址如下:http://www.demodashi.com/demo/11944.html 天道酬勤 前言 作为一名iOS开发者,每当使用APP的时候,总难免会情不自禁的去想想,这个怎么做的?该怎 ...

  2. Ubuntu 14.04 用户如何安装深度音乐播放器和百度音乐插件

    播放本地音乐或者收听国外的音乐电台,Ubuntu 14.04 自带的音乐播放器 Rhythmbox 完全能够满足,但是如果你想有像酷狗那样的国内播放器就需要折腾一下,还好有深度音乐播放器,这是一款完全 ...

  3. 在线音乐播放器-----酷狗音乐api接口抓取

    首先身为一个在线音乐播放器,需要前端和数据库的搭配使用. 在数据库方面,我们没有办法制作,首先是版权问题,再加上数据量.所以我们需要借用其他网络播放器的数据库. 但是这些在线播放器,如百度,酷狗,酷我 ...

  4. 22_Android中的本地音乐播放器和网络音乐播放器的编写，本地视频播放器和网络视频播放器，照相机案例，偷拍案例实现

    1 编写以下案例: 当点击了"播放"之后,在手机上的/mnt/sdcard2/natural.mp3就会播放. 2 编写布局文件activity_main.xml <Line ...

  5. H5音乐播放器【歌单列表】

    上篇详细描述了播放页歌词如何实现跟随跟单滚动,如何解析歌词,那么歌单页又是如何生成的呢,话不多说,直接上图上代码! 首先需要获取数据,具体获取数据api请转到我跟我大兄弟博客去观看学习去,同时也感谢我 ...

  6. iOS - 音乐播放器需要获取音乐文件的一些数据信息(封装获取封面图片的类）

    // // AVMetadataInfo.h // AVMetadata // // Created by Wengrp on 15/10/27. // Copyright © 2015年 Wengr ...

  7. swift 音乐播放器项目-《lxy的杰伦情歌》开发实战演练

    近期准备将项目转化为OC与swift混合开发.试着写一个swift音乐播放器的demo,体会到了swift相对OC的优势所在.废话不多说.先上效果图: watermark/2/text/aHR0cDo ...

  8. Andriod小项目——在线音乐播放器

    转载自: http://blog.csdn.net/sunkes/article/details/51189189 Andriod小项目——在线音乐播放器 Android在线音乐播放器 从大一开始就已 ...

  9. 记一次酷狗音乐API的获取，感兴趣的可以自己封装开发自己的音乐播放器

    1.本教程仅供个人学习用,禁止用于任何的商业和非法用途,如涉及版权问题请联系笔者删除. 2.随笔系作者原创文档,转载请注明文档来源:http://www.cnblogs.com/apresunday/ ...

  10. 解决ubuntu系统中firefox无法播放网页版音乐播放器音乐

    Reference: https://blog.csdn.net/h736131708/article/details/80775382 因为网页版的qq音乐或者网易云音乐都把音频换成了AAC格式,这 ...

随机推荐

  1. VUE的Seo优化 如何实现

    今天看到这样一个问题,在vue中,如何进行seo优化呢? 大家应该都知道,seo优化主要是做搜索引擎的排名,但是ajax异步又不支持seo,同时对于url #/的写法,搜索引擎也没办法爬取网站内其他路 ...

  2. ArrayList实现原理分析

    ArrayList使用的存储的数据结构 ArrayList的初始化 ArrayList是如何动态增长 ArrayList如何实现元素的移除 ArrayList小结 ArrayList是我们经常使用的一 ...

  3. poj 1543 Perfect Cubes (暴搜)

    Perfect Cubes Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 15302   Accepted: 7936 De ...

  4. 一、Core授权（基于cookie）

    一.Core的授权 配置 打开项目中的Startup.cs文件,找到ConfigureServices方法,我们通常在这个方法里面做依赖注入的相关配置.添加如下代码: public void Conf ...

  5. scrapy 知乎关键字爬虫spider代码

    以下是spider部分的代码.爬知乎是需要登录的,建议使用cookie就可以了,如果需要爬的数量预计不多,请不要使用过大的线程数量,否则会过快的被封杀,需要等十几个小时账号才能重新使用,比起损失的这十 ...

  6. 浅谈java虚拟机|系列1|架构简介

    今天开了一个专题.谈谈我们java程序员每天面对的java虚拟机(jvm). 本质上来说,jvm分两部分:编译器(compiler)和运行时(runtime). 所谓的编译器,简单来说,他就是个翻译机 ...

  7. Hadoop中配置环境后重启失效解决方法

    Ubuntu下设置环境变量有三种方法,一种用于当前终端,一种用于当前用户,一种用于所有用户: 一:用于当前终端: 在当前终端中输入:export PATH=$PATH:<路径> 不过上面的 ...

  8. scrapy五大核心组件和中间件以及UA池和代理池

    五大核心组件的工作流程 引擎(Scrapy) 用来处理整个系统的数据流处理, 触发事务(框架核心) 调度器(Scheduler) 用来接受引擎发过来的请求, 压入队列中, 并在引擎再次请求的时候返回. ...

  9. 如何在生产环境下实现每天自动备份mysql数据库

    1.描述 通"shell脚本+定时任务"的方式来实现自动备份mysql数据库. 2.环境 备份路径:/data/mysqlbak/ 备份脚本:/data/mysqlbak/mysq ...

  10. vue2.0关于添加属性后视图不能更新的问题

    属性赋值和this.$set 和vue.$set方法我不行 可以用 this.$delete来进行删除后在设置都可以了