资讯专栏INFORMATION COLUMN

基于vue-cli 构建 使用全家桶实现 音乐播放器 等

netScorpion / 3120人阅读

摘要:这边忙完了会首先把滚轮实现思路跟大家讲一下滚轮实现思路展示音乐播放器优化滚轮性能优化自定义指令自定义

先上最终效果地址
PC 开启手机浏览器模式

从vue2.0 开始接触,然后一边看官网教程一边写demo,

主要实现以下

PC端 时间选择插件 【涉及 props, watch, mounted,transaction内置组件 和组件开发熟悉】 demo

移动端 仿IOS滚轮 时间选择 【涉及 $el, $nextick touch 事件等】demo

全局组件 加载框 弹出对话框【涉及 vuex,回调, 组件内的事件分发dispatch 】

QQ音乐播放器 【涉及 html5>audio 移动端适配 vue-router 嵌套路由 参数路由 动态更改index.html title ajax 复杂组件开发 vuex 单向事件】demo

具体代码请查看,欢迎关注https://github.com/k186/vueDemo 切到likeMusicplayer 分支

上面是用官方Vue-cli 构建的,最近几天在看webpack2 准备自己配置打包。
这边忙完了会首先把滚轮实现思路跟大家讲一下
//todo 
1.滚轮实现思路展示
2.音乐播放器 vuex 优化
3.滚轮性能优化
4.自定义指令 tap 
5.自定义scroll

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

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

相关文章

  • 用vue全家写一个“以假乱真”的网易云音乐

    摘要:关于路由,刚开始设计路由的时候想了很多,由于一开始的目标就是网易云音乐的所有内容,所以设计了三级路由,,大概这样,点击查看。 标题略夸张了,但是这个从ui还原上已经很接近官方版本了。虽然目前这个是很多人造过的轮子,但是可能每个人的实现方式都不一样,自己写一遍也会有许多收获。 项目地址 预览地址 api:ap使用的是一个开源的nodejs封装的网易云音乐api,地址 技术栈 vue...

    clasnake 评论0 收藏0
  • Vue全家+Mint-Ui打造高仿QQMusic,搭配详细说明

    摘要:简介最近有点小闲置,于是乎希望写点东西,正好自己喜欢听歌,便决定自己写一个音乐的简易版。核心文件则是在在这里使用统一管理页面切换动画,歌曲播放状态,歌曲进度等信息。所有对于歌曲的操作都通过来进行全局管理,然后对相应的变化做出全局改变。 Vue-QQMusic 简介: 最近有点小闲置,于是乎希望写点东西,正好自己喜欢听歌,便决定自己写一个QQ音乐的简易版。顺便进一步加深下自己对移动端的知...

    haoguo 评论0 收藏0
  • Vue全家高仿网易云音乐mac客户端版(不像赔十个!!)

    摘要:库用了魔改样式的歌词滚动部分用了黄轶老大的贼爽主题换肤用的变量替换。语言的下一代标准预处理器安装与使用前端项目后端项目 音乐播放器虽然烂大街了,但是作为前端没自己撸一个一直是个遗憾,而且偶然间发现pc端web版的网易云音乐做的实在是太简陋了,社区仿pc客户端的网易云也不多见,为了弥补这个遗憾,就用vue全家桶模仿mac客户端的ui实现了一个,欢迎提出意见和star~ 预览地址 源码地址...

    mgckid 评论0 收藏0
  • Vue 实现网易云音乐 WebApp

    摘要:基于等开发一款移动端音乐,界面参考了安卓版的网易云音乐布局适配常见移动端。图标使用阿里巴巴图标库,中间的唱片旋转动画使用了实现。搜索功能实现功能搜索歌手歌单歌曲热门搜索数据节流上拉刷新保存搜索记录。 基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp,UI ...

    Karuru 评论0 收藏0

发表评论

0条评论

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