当前位置：首页 > 资讯 > 技术文档

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

时间：2021-05-20 04:56 编辑：来源：阅读：
扫一扫，手机访问

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

[b]前言[/b] 前端时间学了vue，一开始看了vue1.0，后来实在觉得技术总得实践，就直接上手vue2.0。然后花了将近一周时间做了一个网易云音乐的小项目。一开始觉得项目比较小，没必要用vuex所以就没有使用，但是后来发现数据流传输有点麻烦，后续会使用vuex。 [b]技术栈[/b] vue+vue-router（核心框架） [url=https://github.com/ustbhuangyi/better-scroll]better-scroll[/url]（使移动端滑动体验更加流畅） [url=https://www.npmjs.com/package/vue-lazyload]vue-lazyload[/url]（用户图片懒加载） nprogress（用于加载过渡） [url=https://www.npmjs.com/package/axios] axios[/url]（请求） [b]功能分析与设计[/b] 首先我先参考了现有的一些APP的设计与开发，然后决定做了歌单和搜索两个模块，本身主要以前端为主，后端代码并没有研究，这里要感谢这位同学写的API。如果你没有API也没有关系，这并不影响我们的开发，你可以写如下形式的json数据进行模拟： [img]http://files.jb51.net/file_images/article/201703/2017033014112016.png[/img] vuejs 路由结构如下 [img]http://files.jb51.net/file_images/article/201703/2017033014112017.png[/img] 以下是组件 [img]http://files.jb51.net/file_images/article/201703/2017033014112018.png[/img] [b]1.歌单部分：[/b] 数据主要由API提供，源码中有具体地址。需要了解audio标签，不熟悉的同学看audio [b]2.搜索部分：[/b] 通过绑定@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(() => {
 //调用
});

最后上几张效果图 [img]http://files.jb51.net/file_images/article/201703/2017033014112019.gif[/img] [img]http://files.jb51.net/file_images/article/201703/2017033014112020.gif[/img] [img]http://files.jb51.net/file_images/article/201703/2017033014112021.gif[/img] github项目地址：[url=https://github.com/hua1995116/musiccloudWebapp/]https://github.com/hua1995116/musiccloudWebapp/[/url] 在线演示地址：[url=http://qiufengh.com:8080/]http://qiufengh.com:8080/[/url] 以上所述是小编给大家介绍的Vuejs仿网易云音乐实现听歌及搜索功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持！

全部评论(0)

资讯排行榜
更多>>