qq_45796382的博客

通过playMusic这个函数我们现在就把当前点击歌曲所属于的歌单i中的所有歌单传给 updatePlayList,实现了itemList数据的修改。还有一个小问题，就是切换歌曲的时候默认还是不播放and图标更改的问题，我们需要一切换直接播放，并且改为播放图标。但是我们接下来发现我们只能播放该列表的第一首歌，因为我们还没有传递给数组下标，此时并不知道我们点击的是拿一首歌。点击歌曲的时候就可以切换歌曲进行播放，本质是就是palyList中的数据进行了改变。所以定义一个函数来更改palyList里面的数据。

我们去全局store中定义一个变量isbtnShow来控制播放按钮的显示，并且控制isbtnShow的状态。paused为true音乐暂停，如果想使音乐播放则调用audio里面的play方法。逻辑：如果播放器为暂停状态，点击就可以播放，如在播放中，那么点击之后就暂停。渲染、导入部分都大同小异，接下来直接快进到底部组件播放功能~！（2）当获取到音乐的 id 后即可播放。注：（1）controls可以让这个播放器显示出来。3、在解决播放图标和暂停图标的显示问题。再用v-if条件渲染。1、导入audio标签。

常规操作就不赘述拉。

不懂，先占个位置。

我们创建一个名为itemMusicTop.vue组件作为itemMusic.vue的子组件，负责整个歌单详情页的top部分（如图）所以在子组件itemMusicTop.vue中，我们需要拿到之前playList中的值，这就是一个父向子传值的过程。1、导入子组件后，为子组件导入一个自定义属性playList。3、然后就可以拿到背景了。2、在子组件中拿到数据。

按照效果图来，再导入homeView.vue就行了。

下载好axios后导入即可，注意这里实现响应式数据，需要更改images的值，vue3中的setup()和reactive不是很懂，之后的帖子再细细研究。

需要实现如图效果所以我们应用vant库现成的轮播图就好，按照文档安装好vant库之后，我们选择按需引入组件样式。

根据展示，需要创建一个头部模块，创建一个div,里面嵌套者，汉堡列表图标，文字，搜索图标并将其分别放进三个div里，最后再修改样式即可。

1、现在index.html中导入icofont中的代码2、2、在需要导入的页面中插入标签，复制所需要的图标代码3、在app.vue中修改图标大小

项目开始我们首先配置响应式布局，在目录下创建一个js文件夹，创建rem.js。