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

前言

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

技术栈

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

功能分析与设计

首先我先参考了现有的一些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://qiufengh.com:8080/

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

时间: 2017-03-27

js仿百度音乐全选操作

本文实例为大家分享了js全选操作的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> *{margin:0;padding:0;} ul{list-style:none;} #conten

js控制网页背景音乐播放与停止的方法

本文实例讲述了js控制网页背景音乐播放与停止的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

JS+html5制作简单音乐播放器

本教程为大家分享了JS音乐播放器的具体代码,供大家参考,具体内容如下 1.HTML <audio> 标签定义声音,比如音乐或其他音频流.其主要属性有src:要播放的音频的 URL,controls:如果出现该属性,则向用户显示控件,比如播放按钮. 几个主要的标签如下: <div> <h4 id="name">李玉刚 - 刚好遇见你</h4> <br> <audio id="audio" src=&qu

JavaScript实现音乐自动切换和轮播

前言:前两天有个同学问我音乐自动切换,并在所有歌曲都播放完成以后实现循环播放的效果.自己折腾了一下做了出来,今天整理桌面的时候突然看见,在拖到回收站的一瞬间想着还是写一篇博客分享一下.实现的方法有很多种,我这里简单的实现. 通过修改video的src(这种应该是最好节省资源的) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl

JavaScript实现带播放列表的音乐播放器实例分享

代码较最基础的播放器实现增加了playlist,使用MakeList实现多首播放,有需要的可以直接使用: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

运用js教你轻松制作html音乐播放器

用HTML做了个音乐播放器,可以循环播放,选择歌曲,以及自动播放下一首,运用了js和json知识,下面是效果图和源码,有兴趣的可以试试哦 效果图: 源码:html <span style="color:#999999;"><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>音乐播放器</title> <sc

js给网页加上背景音乐及选择音效的方法

本文实例讲述了js给网页加上背景音乐及选择音效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <HTML> <HEAD> <TITLE>给网页加上背景音乐,选择音效功能</TITLE> <STYLE> <!--样式单 --> a{font-size:30pt;color:blue;font-family:Vineta BT} a:link{text-decoration:none;} a:hover{text-

js wmp操作代码小结(音乐连播功能)

WMP-网页中常见属性和方法 <object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject" id="wmp" width="0" height="0" style="width:0px;height:0px;"></object> //基本属性

原生js通过一行代码实现简易轮播图

这是一个简易的js无限循环轮播图,只用了一行js代码就实现了无限循环,记录一下三目运算符的伟大! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l

js 数组操作代码集锦

用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多,自以为js高手的自己居然无从下手,一下狠心,我学!呵呵.学了之后才知道,js数组的功能强大很,远比VB,C#强多了,大家慢慢看吧 1.数组的创建 复制代码 代码如下: var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,

VBScript 文件操作代码小结

创建文本文件 复制代码 代码如下: Set objFSO = CreateObject("Scripting.FileSystemObject") Set objFile = objFSO.CreateTextFile("C:\FSO\ScriptLog.txt") 检察文件是否存在 复制代码 代码如下: Set objFSO = CreateObject("Scripting.FileSystemObject") If objFSO.FileE

JS 日期操作代码,获取当前日期,加一天,减一天

title $ = function(o) { return typeof o === 'string' ? document.getElementById(o) : o }; //设置当前日期 var ma = [['1','3','5','7','8','10'],['4','6','9','11']]; var dd = new Date(); var x = dd.toLocaleString(); var o = pasDate(x); $('date').value = o.join

js实现3D图片逐张轮播幻灯片特效代码分享

本文实例讲述了javascript实现3D图片逐张轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现3D图片逐张轮播幻灯片特效代码,实现过程很简单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js实现3D图片逐张轮播幻灯片特效代码如下 <head> <meta http-equiv="Content-Type

JS switch判断 三目运算 while 及 属性操作代码

三 目运算:如var a = 10: var b= 12: c = a>b ?a:b; 若成立执行a否则执行b var isHide = true; 若用if判断语句如下 if(isHide) { box.style.display = "block"; } else { box.style.display = "none"; } 三目运算替代if box.style.display = isHide?"block":"none&

vue不操作dom实现图片轮播的示例代码

本文介绍了vue不操作dom实现图片轮播的示例代码,分享给大家,具体如下: 效果 宽度为1190px且水平居中的轮播盒子: 中间是当前显示的默认尺寸图片: 左右两边是预显示的小尺寸图片: 轮播从右至左,图片逐渐放大. 做普通平滑轮播也可以参照这个思路 html <ul> <li v-for="(demo,index) in demoList" :key="index" :class="{'demo-left':demoStyle(inde

jquery操作select option 的代码小结

1.获取选中select的value和text,html代码如下: 复制代码 代码如下: <select id="mySelect"> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </selec

js 刷新页面的代码小结 推荐

1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.forward()返回下一页 4. window.history.go(返回第几页,也可以使用访问过的URL) 例: <a href="javascript:history.go(-1);">向上一页</a> response.Write("<script