Vuejs仿网易云音乐实现听歌及搜索功能


Posted in Javascript onMarch 30, 2017

前言

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

技术栈

vue+vue-router(核心框架)
better-scroll(使移动端滑动体验更加流畅)
vue-lazyload(用户图片懒加载)
nprogress(用于加载过渡)
 axios(请求)

功能分析与设计

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

Vuejs仿网易云音乐实现听歌及搜索功能

vuejs

路由结构如下

Vuejs仿网易云音乐实现听歌及搜索功能

以下是组件

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(() => {
 //调用
});

最后上几张效果图

Vuejs仿网易云音乐实现听歌及搜索功能

Vuejs仿网易云音乐实现听歌及搜索功能

Vuejs仿网易云音乐实现听歌及搜索功能

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

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

以上所述是小编给大家介绍的Vuejs仿网易云音乐实现听歌及搜索功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery控制display属性为none或block
Mar 31 Javascript
js取模(求余数)隔行变色
May 15 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
BootStrap响应式导航条实例介绍
May 06 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
vue .sync修饰符的使用详解
Jun 15 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
vue+eslint+vscode配置教程
Aug 09 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 Javascript
vue实现放大镜效果
Sep 17 Javascript
canvas绘制一个常用的emoji表情
Mar 30 #Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 #Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 #Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 #Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 #Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 #Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 #Javascript
You might like
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
Python正则表达式教程之二:捕获篇
2017/03/02 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
个人自我鉴定范文
2013/10/04 职场文书
教你怎样写好自我评价
2013/10/05 职场文书
行政助理岗位职责范文
2013/12/03 职场文书
教师队伍管理制度
2014/01/14 职场文书
国庆节新闻稿
2015/07/17 职场文书
毕业欢送会致辞
2015/07/29 职场文书
寒假生活随笔
2015/08/15 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs