前言

前端时间学了vue,一开始看了vue1.0,后来实在觉得技术总得实践,就直接上手vue2.0。然后花了将近一周时间做了一个网易云音乐的小项目。一开始觉得项目比较小,没必要用vuex所以就没有使用,但是后来发现数据流传输有点麻烦,后续会使用vuex。

技术栈

功能分析与设计

首先我先参考了现有的一些APP的设计与开发,然后决定做了歌单和搜索两个模块,本身主要以前端为主,后端代码并没有研究,这里要感谢这位同学写的API。如果你没有API也没有关系,这并不影响我们的开发,你可以写如下形式的json数据进行模拟:

vuejs

路由结构如下

以下是组件

1.歌单部分:

数据主要由API提供,源码中有具体地址。需要了解audio标签,不熟悉的同学看audio

2.搜索部分:

通过绑定@keydown来绑定事件,实现实时查询。

better-scroll

使用:

1.一定要用一个空层来承载

<div ref="helloWrapper">
<div>
//你的代码
</div>
</div>

2.在vue中使用前必须引入

import BScroll from 'better-scroll';

this.helloScroll = new BScroll(this.$refs.helloWrapper, {
click: true
});

一定要在数据渲染完成后使用better-scroll,

this.$nextTick(() => {
//调用
});

最后上几张效果图

github项目地址:https://github.com/hua1995116/musiccloudWebapp/

在线演示地址:http://www.qiufengh.com/#/

需要改进的有很多,请大家可以多提提意见。后续我会不断改进,如果觉得还可以,请star,你们的star是我前进的动力。

  

  

用vuejs仿网易云音乐(实现听歌以及搜索功能)的更多相关文章

  1. 《云阅》一个仿网易云音乐UI,使用Gank.Io及豆瓣Api开发的开源项目

    CloudReader 一款基于网易云音乐UI,使用GankIo及豆瓣api开发的符合Google Material Desgin阅读类的开源项目.项目采取的是Retrofit + RxJava + ...

  2. C# WPF 低仿网易云音乐(PC)歌词控件

    原文:C# WPF 低仿网易云音乐(PC)歌词控件 提醒:本篇博客记录了修改的过程,废话比较多,需要项目源码和看演示效果的直接拉到文章最底部~ 网易云音乐获取歌词的api地址 http://music ...

  3. C# WPF 低仿网易云音乐(PC)Banner动画控件

    原文:C# WPF 低仿网易云音乐(PC)Banner动画控件 由于技术有限没能做到一模一样的动画,只是粗略地做了一下.动画有点生硬,还有就是没做出网易云音乐的立体感.代码非常简单粗暴,而且我也写有很 ...

  4. 用其他音乐源帮帮网易云,Windows听歌利器

    镜像文章 1.用其他音乐源帮帮网易云,Ubuntu听歌利器 2.用其他音乐源帮帮网易云,Android听歌利器 只剩下Windows端了,一并送上. 1.Windows懒人版 1.1第一种懒人方法 下 ...

  5. 用其他音乐源帮帮网易云,Android听歌利器

    镜像文章 1.用其他音乐源帮帮网易云,Ubuntu听歌利器 2.用其他音乐源帮帮网易云,Windows听歌利器 1.TaiChi模块简介 TaiChi(太极)是一款免解锁,免root,就能够运行 Xp ...

  6. 用其他音乐源帮帮网易云,Ubuntu听歌利器

    镜像文章 1.用其他音乐源帮帮网易云,Android听歌利器 2.用其他音乐源帮帮网易云,Windows听歌利器 众所周知,国内只有网易云推出了Linux的客户端,在Listen 1并不十分好用的基础 ...

  7. Flutter仿网易云音乐:播放界面

    写在前头 本来是要做一个仿网易云音乐的flutter项目,但是因为最近事情比较多,项目周期跨度会比较长,因此分几个步骤来完成.这是仿网易云音乐项目系列文章的第一篇.没有完全照搬网易云音乐的UI,借鉴了 ...

  8. 新鲜出炉高仿网易云音乐 APP

    我的引语 晚上好,我是吴小龙同学,我的公众号「一分钟GitHub」会推荐 GitHub 上好玩的项目,一分钟 get 一个优秀的开源项目,挖掘开源的价值,欢迎关注我. 项目中成长是最快的,如何成长,就 ...

  9. iOS 开发仿网易云音乐歌词海报

    使用网易云音乐也是一个巧合,我之前一直使用QQ音乐听歌,前几天下 app 手机内存告急.于是就把QQ音乐给卸载掉了,正好晚上朋友圈里有一个朋友用网易云音乐分享了一首歌曲,于是我也就尝试下载了网易云音乐 ...

随机推荐

  1. 1641: [Usaco2007 Nov]Cow Hurdles 奶牛跨栏

    1641: [Usaco2007 Nov]Cow Hurdles 奶牛跨栏 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 424  Solved: 272 ...

  2. Omi应用md2site-0.5.0发布-支持动态markdown拉取解析

    写在前面 Md2site是基于Omi的一款Markdown转网站工具,使用简单,生成的文件轻巧,功能强大. 官网:http://alloyteam.github.io/omi/md2site/ Git ...

  3. [Spark] - SparkCore程序优化总结

    http://spark.apache.org/docs/1.6.1/tuning.html1) 代码优化 a. 对于多次使用的RDD,进行数据持久化操作(eg: cache.persist) b. ...

  4. 'utf8' codec can't decode byte 0xd1 in position 931: invalid continuation byte解决方法

    有时候,我得到这样的字符œ导致的UnicodeDecodeError错误. 我需要能够使串的UTF-8有或没有这些字符. 在工作中,经常遇到,读取一个文件,或者是从网页获取一个问题,明明看着是gb23 ...

  5. 利用Arcgis for javascript API绘制GeoJSON并同时弹出多个Popup

    1.引言 由于Arcgis for javascript API不可以绘制Geojson,并且提供的Popup一般只可以弹出一个,在很多专题图制作中,会遇到不少的麻烦.因此本文结合了两个现有的Arcg ...

  6. Linux环境Perl链接MS Sql Server数据库

    1.下载相关软件 unixODBC.freetds和DBD-ODBC ①.Linux系统的ODBC unixODBC-2.3.4.tar.gz ( http://www.unixodbc.org) ② ...

  7. windows phone 8.1 开发:后台任务详解

    原文出自:http://www.bcmeng.com/backtask/ 小梦今天给大家分享一下windows phone 8.1中的后台任务如何实现,许多应用都会用到后台任务,所以我们必须得掌握. ...

  8. R语言基因组数据分析可能会用到的data.table函数整理

    R语言data.table包是自带包data.frame的升级版,用于数据框格式数据的处理,最大的特点快.包括两个方面,一方面是写的快,代码简洁,只要一行命令就可以完成诸多任务,另一方面是处理快,内部 ...

  9. Linux之split命令

    split - split a file into pieces 切割一个文件至多片 参数: -a, --suffix-length=N     使用的后缀的长度,默认长度为2,例如'aa','ab' ...

  10. Appium手势密码滑动之Z字形走势(java篇)

    1.直接使用负的偏移量appium会报错,在后面加上moveto(1,1)就行了 2.直接看图说话 废话少说看代码如: List<AndroidElement> element = dri ...