使用Axure中继器创建网易云音乐播放器歌单列表教程

"本教程详细介绍了如何使用Axure的中继器功能来创建一个类似网易云音乐播放器的歌单列表。通过实例操作，讲解了从原型预览、材料准备、歌曲信息获取、中继器表格设置到交互设计的全过程。" 在Axure中，中继器（Repeater）是一种强大的组件，它允许动态地展示数据，非常适合构建列表或表格形式的内容。在这个教程中，我们将学习如何利用中继器制作网易云音乐播放器的歌单列表。 1. **原型预览与目标效果** - 首先，教程提供了一个原型预览链接，展示了一个完成后的歌单列表界面，包括歌曲封面、歌名、歌手、介绍、分享、评论和点赞功能。 2. **材料准备** - 图片：用于显示歌曲封面。 - 文本：用于显示歌名-歌手、介绍、分享、评论和点赞的文本信息。 - 图标：分享、评论和点赞的图标。 - 按钮：上一首和下一首按钮，用于切换歌曲。 - 矩形：包含HTML代码的矩形，用于嵌入歌曲的播放器。 - 中继器：核心组件，用于存储和显示歌曲信息。 3. **歌曲信息获取** - 从网易云音乐获取歌曲外链播放器代码，并根据需要调整播放器尺寸和模式。 - 复制生成的代码，供中继器使用。 4. **中继器表格设置** - Column0：存放歌曲的播放器代码。 - pic：存放歌曲封面图片。 - songsinger：存放歌名-歌手信息。 - introduce：存放歌曲介绍。 5. **交互设置** - **中继器每项加载时**：设置各项元素的文本值，如介绍、歌名歌手和矩形code的文本，根据中继器当前项的数据动态更新。 - **图片设置**：将图片的值设置为中继器项的pic列数据，实现图片的动态加载。 - **矩形载入时**：使用JavaScript代码控制HTML播放器，这需要具备一定的JS基础。 - **下一首按钮交互**：根据中继器当前页码判断是否跳转至下一页或返回首页。 - **上一首按钮交互**：同样判断当前页码，决定跳转至上一页或末页。 通过这个教程，Axure初学者可以深入理解中继器的用法，以及如何结合实际项目需求设置交互逻辑。对于想要提升Axure原型设计技能的人来说，这是一个很好的实践案例。