4.1.1音乐播放器--案例分析 (1).pptx

【案例4-1】音乐播放器01

案例分析“音乐播放器”微信小程序的页面由上、中、下3个部分组成，这3个部分分别是标签栏区域、内容区域和播放器区域。“音乐播放器”微信小程序的页面效果如右图所示。

案例分析下面对标签栏区域、内容区域和播放器区域分别进行介绍，具体如下。标签栏区域：该区域有音乐推荐、播放器和播放列表3个标签按钮，通过点击标签按钮可以进行标签页的切换。内容区域：通过左右滑动可以实现音乐推荐、播放器和播放列表3个标签页的切换。这3个标签页的具体说明如下。音乐推荐：用于向用户推荐一些歌曲。播放器：用于显示当前播放音乐的信息、专辑封面、播放进度和时间。其中，音乐信息包括当前播放音乐的标题和歌手。播放列表：用于显示当前播放的曲目列表，用户可以进行曲目切换。

案例分析播放器区域：显示当前播放的音乐信息，并且提供了3个按钮，按钮的功能依次为“切换到播放列表”“播放/暂停”“下一曲”。在初始状态下，“音乐播放器”微信小程序默认显示第1个标签页，也就是“音乐推荐”标签页。通过点击标签栏区域中的标签或者左右滑动内容区域可以切换标签页。

案例分析“播放器”标签页的页面效果如右图所示。圆形的图片是专辑封面，在音乐播放时会旋转，音乐暂停时图片暂停旋转。下方是滑动选择器，用于显示或更改音乐的播放进度，滑动选择器左边的时间表示当前播放音乐的时长，右边的时间表示当前曲目的总时长。

案例分析“播放列表”标签页的页面效果如右图所示。图中展示了当前播放列表中的曲目信息，点击其中某一个曲目项可以切换成该曲目。每个曲目项的左侧显示专辑封面、曲目标题和歌手；右侧显示播放状态，如果当前曲目正在播放则显示“正在播放”。