9.小程序--详情页（四）播放页

播放页是重难点哦！

1.跳转到播放页

我们要实现的其实就是从下面两页组件跳转到music-player页面：

 

 

 好啦！另外一个组件同理哦！不对不对，我还得知道点击的是哪首歌曲啊！

法一：

 这就换一种方法吧，之前已经用过很多次这种方法了！

法二：

另一个组件做法完全一样。

另外上面的id是传入到父组件的options中了哦！别忘记啦！

 2.网络请求数据

前面有说过是根据id来确定需要对哪首歌曲进行播放，所以首先要来获取id。

然后就是根据id请求数据，保存数据了！

 

 3.数据展示

这里我们需要自定义导航栏：

 

 这里的样式也有毛玻璃效果哦！

3.1导航栏制作

首先要解决的问题是，不同设备导航栏的宽度不一样，那么怎么获取呢？可以在nav-bar组件中在组件生命周期中获取，但是因为很多地方可能都会用到这个值，所以我们直接在app.js中获取。

 

 

 这里涉及到动态插槽（重难点）

 

 

 另外：

 

 但是现在有一个问题：一个nav-bar组件中有两个插槽，怎么区分呢？使用具名插槽！

同时小程序中如果想要使用多个插槽，需要在js文件中：

关于样式:

 

 3.2内容展示

直接用小程序自带的轮播图组件做会简单很多。

 不过默认轮播图是有一个150px的高度的，我们想要它占据导航栏下面的所有高度，这个需要动态获取。

 

 

实现分页切换：

 

 

 在做具体歌曲和歌词页面时，涉及到不同机型页面的适配，一方面可以使用rpx，但即使这样，不同机型下margin有时也会很大。

 用flex布局 flex-direction:column flex:1 flex:5.也就是说除了album和lyric，其他都是内容撑开的。

下面就是“歌曲”页面的一个布局:

 3.3歌曲播放

下面先来完成一个功能：歌曲播放！

 

 用这个接口实现播放！

我们只需要创建一个播放器audioContext即可，所以这里的代码需要共享，那么是放到app.js中还是hy-event-store中呢？因为这个一旦创建就不会改变，

所以直接放到app.js中即可。不过我这两种方法都不使用！直接创建一个文件导出导入即可！

 

  3.4进度控制

其实就要要监听slider的一些事件。

 value用于绑定滑动选择器的当前进度。

 拖动滑块触发的事件。

 

 

 小问题:来回拖动滑块时，滑块会来回调动，这是因为在我们滑动的过程中，时间也会改变滑块滑动的位置。所以手指在来回拖动滑动的过程中，是不能改变sliderValue和currentTime的。

 

 

 小结：在整个播放过程中，需要改变的有两个东西，一个是进度条也就是sliderValue，一个是currentTime。这两个之间是有关联的。

一方面需要通过点击滑动块来控制进度，另一方面是来回滑动来控制进度

3.5歌词展示

服务器请求的歌词如下：

 3.5.1网络请求

 3.5.2歌词处理

封装一个工具函数。

 

 

3.5.3歌词展示

首先整理一下思路：我们把currentTime和time遍历比较，就可以拿到当前的i值，但是现在这是currentTime时间是展示13对应的歌词吗？不是！因为13这个

歌词是在22292ms时才开始展示的。所以我们要展示的i-1的歌词。而且找到之后就不要继续往后找了！很重要！