资讯专栏INFORMATION COLUMN

使用VUEJS2.0制作音乐播放器

CNZPH / 2453人阅读

摘要:研究了天的成果终于得到回报了,播放器已经制作完成,但还有待于完善。我总是离不开的操作,刚开始学习,还是会经常使用到操作。做播放器的想法来源于之前本人做的开发此文章的灵感。

研究了2天的成果终于得到回报了,播放器已经制作完成,但还有待于完善。我总是离不开jQuery的DOM操作,刚开始学习VUE,还是会经常使用到DOM操作。因此写出来的代码还是有很多缺点,等待往后学习的差不多了,我会再改进的。
做播放器的想法来源于之前本人做的web app《vuejs2 + wp-rest-api开发web app》此文章的灵感。因此再献上一个music player来温习下vue。

一、效果

GIF动图有3M多,如果没有显示出来,请再等等

看到了吧,自己的一点小创意,搞了个猪头上去。

二、相关代码

本程序中仅使用了vue的ajax框架vue-resource,未使用到vue-router,因此再安装vue-cli的时候,可以略过vue-router,本程序仅有一个组件,即只有一个vue文件,使用了css预处理语言stylus。使用的json数据为本站相关php代码生成的(仅为了演示),如果你是在本地搭建环境,json也可以写在本地。
本demo已经使用cordova制作成了安卓的apk文件,如需体验,请点击此处下载
源码已经提交到github(记得给我加星哦):https://github.com/king2088/v...
演示地址:http://www.egtch.com/t_works/...

1、生成json的php如下(代码非常简单,就是定义一串json数据,然后在展现出来):


2、app.vue代码






文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111778.html

相关文章

  • 使用VUEJS2.0制作音乐放器

    摘要:研究了天的成果终于得到回报了,播放器已经制作完成,但还有待于完善。我总是离不开的操作,刚开始学习,还是会经常使用到操作。做播放器的想法来源于之前本人做的开发此文章的灵感。 研究了2天的成果终于得到回报了,播放器已经制作完成,但还有待于完善。我总是离不开jQuery的DOM操作,刚开始学习VUE,还是会经常使用到DOM操作。因此写出来的代码还是有很多缺点,等待往后学习的差不多了,我会再改...

    EdwardUp 评论0 收藏0
  • 使用VUEJS2.0制作音乐放器

    摘要:研究了天的成果终于得到回报了,播放器已经制作完成,但还有待于完善。我总是离不开的操作,刚开始学习,还是会经常使用到操作。做播放器的想法来源于之前本人做的开发此文章的灵感。 研究了2天的成果终于得到回报了,播放器已经制作完成,但还有待于完善。我总是离不开jQuery的DOM操作,刚开始学习VUE,还是会经常使用到DOM操作。因此写出来的代码还是有很多缺点,等待往后学习的差不多了,我会再改...

    lwx12525 评论0 收藏0
  • vuejs2.0制作最简单的顶部菜单滑动效果

    摘要:此方法可适用于普通页面,也可以是其他,使用相关样式即可。下面效果是横向滚动,也可以使用修改为垂直滚动。 此方法可适用于普通html页面,也可以是其他,使用相关css样式即可。下面效果是横向滚动,也可以使用overflow-y: scroll; 修改为垂直滚动。 主要代码部分: {{item.so...

    linkFly 评论0 收藏0
  • 使用Vue2.0制作音乐放器

    摘要:基于的音乐播放器音乐该应用使用全家桶完成,借助音乐来实现音乐搜索播放,应用持续更新中源代码源代码地址如果觉得还不错的大家可以给个我会持续更新的附音乐整理效果图在线预览在线预览地址音乐播放器端请在浏览器的移动端模式下查看使用使用依赖目 基于Vue2.0的音乐播放器(QQ音乐API) 该应用使用Vue全家桶完成,借助QQ音乐api来实现音乐搜索播放,应用持续更新中... 源代码 源代码地址...

    taoszu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<