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 相关文章推荐
javascript 对象的定义方法
Jan 10 Javascript
javascript打开新窗口同时关闭旧窗口
Jan 16 Javascript
js鼠标左右键 键盘值小结
Jun 11 Javascript
使用js 设置url参数
Jul 08 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
Vue实现剪贴板复制功能
Dec 31 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
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
cookie的secure属性详解
2015/04/08 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现弹窗祝福效果
2019/04/07 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
UNIX文件系统常用命令
2012/05/25 面试题
大学生在校学习的自我评价
2014/02/18 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
婚礼答谢词
2015/01/04 职场文书
财务经理岗位职责
2015/01/31 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis