当我们将音乐列表往上滑的时候   我们上面的歌手图片部分也会变小
当我们将音乐列表向下拉的时候   我们的图片会放大
当我们将音乐列表向上滑的时候   我们的图片有一个高斯模糊的效果 并且随着我们的列表向上滑动的越多  图片越模糊
封装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. 对应关系,以及Module作用

    register 8101---10086 gateway 8201---10010 item-service 8301---8081 manage-web 4901---9001 npm start ...

  2. php实用小技巧【持续更新】

    这是本人开始做项目的时候遇到过的问题还有解决方法 1.eval函数 能把字符串转换成可执行的php代码,如果字符串不是可执行的php代码的话,需要在前面加上@,屏蔽notice 2.array_mer ...

  3. centos7搭建安装superset

    superset官网: https://superset.incubator.apache.org/ 系统环境:system:centos7 一.安装工具及依赖包安装工具包:yum -y instal ...

  4. 对OO原则的个人理解

    1.单一职责原则.(Single Responsibility Principle) 注解:社会化大生产分工要细.具体每个人最好只做一件事(不要一人兼多职),这样如果这个人请假或辞职,对生产不会产生影 ...

  5. 常用命令之------ln

    当我们需要在不同的目录,用到相同的文件时,我们不需要在每一个需要的目录下都放一个必须相同的文件,我们只要在某个固定的目录,放上该文件,然后在 其它的目录下用ln命令链接(link)它就可以,不必重复的 ...

  6. 【POJ2486】Apple Tree

    题目大意:给定一棵 N 个节点的有根树,点有点权,边权均为1.现允许从根节点出发走 K 步,求可以经过的点权之和最大是多少. 题解:可以将点权看作是价值,将可以走的步数看作是重量,则转化成了一个树上背 ...

  7. 上传base64图片到七牛云前端遇到的坑

    介意前端普通引入七牛云SDk上传图片到七牛云需要多个js,所以才有了base64的上传方式,简化操作,(懒.) 七牛云官方文档如下 https://developer.qiniu.com/kodo/k ...

  8. formant

    1.函数功能将一个数值进行格式化显示. 2. 如果参数format_spec未提供,则和调用str(value)效果相同,转换成字符串格式化. >>> format(3.141593 ...

  9. c和java中各种数据类型所占字节

      c java char 1 2 short 2 int 4 long 4 8 float 4 double 8

  10. 【NOIP2016提高A组集训第14场11.12】随机游走

    题目 YJC最近在学习图的有关知识.今天,他遇到了这么一个概念:随机游走.随机游走指每次从相邻的点中随机选一个走过去,重复这样的过程若干次.YJC很聪明,他很快就学会了怎么跑随机游走.为了检验自己是不 ...