2018-03-03 云音乐4
2018-03-07 本文已影响0人
tsl1127
做个loading，让用户知道上传文件的进度
image.png
image.png
接下来做绝对居中
animation: loading 1s infinite alternate-reverse;
animation-timing-function: linear; //线性的变化
infinite是指重复
alternate-reverse指可以交替变化
image.png
id找元素，class找样式
image.png
image.png
image.png
以上方式是通过一个div来阻止用户在上传音乐的过程中点击屏幕
方法二：用变量加锁的方式来实现
image.png
image.png
image.png
问题：在上传过程中（未完成）再点击上传文件，请求会被阻止，但是一旦第一个文件上传完了，第2个文件会继续上传，即会发2个请求，这是七牛API的问题
接下来做手机端首页
先分析下布局
最上面红色区域
image.png
第二个区域是导航栏
image.png
image.png
接下来是li
image.png
image.png
h2标签
li
image.png
每个Li点击之后会快速的跳到另外一个对应歌曲页面
logo是个SVG的标签
接下来做导航栏tab的MVC
image.png
点击导航栏各个按钮，对应显示各自的界面
事件发布
image.png
各页面事件订阅：
image.png
接下里做“最新音乐”
一个js模块里如何再分模块？
最原始方法：
image.png
page-1-1不一定比page-1-2先加载完
写page-1-2写出来
image.png
找到3首歌之后渲染出来
在ol里插入多个li
image.png
播放列表里的icon库
<script src="//at.alicdn.com/t/font_395875_4hwrep7mypx8ncdi.js"></script>
image.png
点击应该跳到对应歌手的页面
image.png
查询参数
window.location.search
image.png
image.png
返回的查询参数去掉问号
image.png
image.png
image.png
接下来做播放暂停功能
image.png
image.png
问题：怎么能让歌曲播放呢？
方法一：在html里加autoplay 加controls可以显示播放
image.png
image.png
方法二：用JS去调用
image.png
image.png
