基于vue的音乐播放器
项目说明
由webpack构建,基于vue全家桶,模块化开发,调用了qq音乐的接口
项目结构
<template>
<div id="app">
<header>
<img>
</header>
<main>
<player></player>
<section>
<nav>
<router-link to='/search'>搜索</router-link>
<router-link to='/hot'>热榜</router-link>
<router-link to='/list'>新歌</router-link>
<router-link to='/history'>历史</router-link>
</nav>
<keep-alive >
<router-view ></router-view>
</keep-alive>
</section>
</main>
<footer>
<BottomBtn></BottomBtn>
</footer>
<About></About>
</div>
</template>
数据流
有空再画
踩的坑
手机chrome100vh多了导航栏的高度
监听window.resize
事件,动态计算高度
具体的看这里
移动端audio
元素填充了src
不会自动播放
填充了数据后加个触发
document.querySelector('#player').play()
性能问题
动画用多了,姑且去掉了些效果(模糊之类的),用了玄学的will-change
、transform: translate3d(0, 0, 0)
,不过感觉好像没啥用,看来得用transform
替代一些高宽大小变换
其他想起来再补充
不足
我已经不管兼容性了啊哈哈哈哈哈哈
滥用flex
布局;
Polyfill
?那是什么?
还是用了jquery
还只用了jq的ajax
,因为用axios遇到了些问题。
后续计划
播放模式
歌词及其相关
桌面端布局
收藏列表
本地存储
涟漪效果
ps:谁知道什么时候去做呢,啊哈哈哈哈
以上!
2B小姐姐~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。