- 博客(25)
- 收藏
- 关注
RSS订阅原创 点击列表切换歌曲
通过playMusic这个函数我们现在就把当前点击歌曲所属于的歌单i中的所有歌单传给 updatePlayList,实现了itemList数据的修改。还有一个小问题，就是切换歌曲的时候默认还是不播放and图标更改的问题，我们需要一切换直接播放，并且改为播放图标。但是我们接下来发现我们只能播放该列表的第一首歌，因为我们还没有传递给数组下标，此时并不知道我们点击的是拿一首歌。点击歌曲的时候就可以切换歌曲进行播放，本质是就是palyList中的数据进行了改变。所以定义一个函数来更改palyList里面的数据。
2023-03-20 16:56:08
439
原创 底部组件播放功能
我们去全局store中定义一个变量isbtnShow来控制播放按钮的显示，并且控制isbtnShow的状态。paused为true音乐暂停，如果想使音乐播放则调用audio里面的play方法。逻辑：如果播放器为暂停状态，点击就可以播放，如在播放中，那么点击之后就暂停。渲染、导入部分都大同小异，接下来直接快进到底部组件播放功能~！（2）当获取到音乐的 id 后即可播放。注：（1）controls可以让这个播放器显示出来。3、在解决播放图标和暂停图标的显示问题。再用v-if条件渲染。1、导入audio标签。
2023-03-20 14:20:27
171
原创 通过props进行渲染页面以及对歌单详情页的背景处理
我们创建一个名为itemMusicTop.vue组件作为itemMusic.vue的子组件，负责整个歌单详情页的top部分（如图）所以在子组件itemMusicTop.vue中，我们需要拿到之前playList中的值，这就是一个父向子传值的过程。1、导入子组件后，为子组件导入一个自定义属性playList。3、然后就可以拿到背景了。2、在子组件中拿到数据。
2023-03-18 22:46:06
116
原创 获取路由参数获取对应的歌单数据
2、在itemMusic.vue中导入，调用getMusicItemList并将所点击页面的id传过去。这个操作与之前做轮播图一样，都是通过axios拿数据。1、创建一个item.js来获取歌单详情页的数据。3、在创建一个空对象，将内容存放在这个对象里。
2023-03-18 14:30:27
113
原创 歌单路由跳转并携带参数
（2）由于不同的歌单跳转的x详情页不同，需要传递参数id来进行匹配（用query传递参数）（1）注意router-link的覆盖范围。3、router-link跳转即可。
2023-03-17 21:39:45
83
转载 Vue路由传参详解（params 与 query）
Vue路由传参详解（params 与 query）_vue params传参_coder_7的博客-优快云博客
2023-03-17 20:40:07
124
原创 发现好歌单的列表渲染
2、创建一个数组来存放我们拿到的接口中的图片，播放量，文案等等，并完成赋值。1、先去vant上扒一个轮播图组件。3、通过v-for循环展示。
2023-03-17 19:35:05
105
原创 发现歌单数据的获取
1、将axios封装之后，先写好样式，再在homeView.vue进行导入、注册。2、在home.js中写下接口地址，这样是为了模块化管理。3、最后回到MusicList.vue中调用就行了。
2023-03-17 15:25:53
86
原创 封装axios请求
下载好axios后导入即可，注意这里实现响应式数据，需要更改images的值，vue3中的setup()和reactive不是很懂，之后的帖子再细细研究。
2023-03-16 23:03:58
109
原创 完成头部导航组件
根据展示，需要创建一个头部模块，创建一个div,里面嵌套者，汉堡列表图标，文字，搜索图标并将其分别放进三个div里，最后再修改样式即可。
2023-03-15 20:24:14
119
原创 字体图标的引入
1、现在index.html中导入icofont中的代码2、2、在需要导入的页面中插入标签，复制所需要的图标代码3、在app.vue中修改图标大小
2023-03-15 10:47:10
93
原创 495. 提莫攻击
在《英雄联盟》的世界中，有一个叫 “提莫” 的英雄。他的攻击可以让敌方英雄艾希（编者注：寒冰射手）进入中毒状态。当提莫攻击艾希，艾希的中毒状态正好持续 duration 秒。正式地讲，提莫在 t 发起攻击意味着艾希在时间区间 [t, t + duration - 1]（含 t 和 t + duration - 1）处于中毒状态。如果提莫在中毒影响结束 前 再次攻击，中毒状态计时器将会 重置 ，在新的攻击之后，中毒影响将会在 duration 秒后结束。
2023-03-14 14:40:28
87
原创 485. 最大连续 1 的个数
给定一个二进制数组 nums ， 计算其中最大连续 1 的个数。示例 1：输入：nums = [1,1,0,1,1,1]输出：3解释：开头的两位和最后的三位都是连续 1 ，所以最大连续 1 的个数是 3.示例 2:输入：nums = [1,0,1,1,0,1]输出：2提示：nums[i] 不是 0 就是 1.
2023-03-14 11:17:38
78
原创 350. 两个数组的交集 II
题目要求给你两个整数数组 nums1 和 nums2 ，请你以数组形式返回两数组的交集。返回结果中每个元素出现的次数，应与元素在两个数组中都出现的次数一致（如果出现次数不一致，则考虑取较小值）。可以不考虑输出结果的顺序。示例 1：输入：nums1 = [1,2,2,1], nums2 = [2,2]输出：[2,2]示例 2:输入：nums1 = [4,9,5], nums2 = [9,4,9,8,4]输出：[4,9]提示：1 <= nums1.length, nu.
2022-05-17 13:28:02
196
原创 36. 有效的数独
题目要求请你判断一个9 x 9 的数独是否有效。只需要 根据以下规则 ，验证已经填入的数字是否有效即可。数字1-9在每一行只能出现一次。数字1-9在每一列只能出现一次。数字1-9在每一个以粗实线分隔的3x3宫内只能出现一次。（请参考示例图）注意：一个有效的数独（部分已被填充）不一定是可解的。只需要根据以上规则，验证已经填入的数字是否有效即可。空白格用'.'表示。示例 1：输入：board =[["5","3",".",".","7","."...
2022-05-16 21:32:08
80
原创 219. 存在重复元素 II
题目要求给你一个整数数组 nums 和一个整数 k ，判断数组中是否存在两个 不同的索引 i 和 j ，满足 nums[i] == nums[j] 且 abs(i - j) <= k 。如果存在，返回 true ；否则，返回 false 。示例 1：输入：nums = [1,2,3,1], k = 3输出：true示例 2：输入：nums = [1,0,1,1], k = 1输出：true示例 3：输入：nums = [1,2,3,1,2,3], k = 2输出：fa
2022-05-16 21:17:38
125
原创 217. 存在重复元素
给你一个整数数组 nums 。如果任一值在数组中出现 至少两次 ，返回 true ；如果数组中每个元素互不相同，返回 false 。示例 1：输入：nums = [1,2,3,1]输出：true示例 2：输入：nums = [1,2,3,4]输出：false示例3：输入：nums = [1,1,1,3,3,4,3,2,4,2]输出：true提示：1 <= nums.length <= 105-109 <= nums[i] <= 109...
2022-05-16 20:58:52
163
原创 706. 设计哈希映射
题目要求不使用任何内建的哈希表库设计一个哈希映射（HashMap）。实现 MyHashMap 类：MyHashMap() 用空映射初始化对象void put(int key, int value) 向 HashMap 插入一个键值对 (key, value) 。如果 key 已经存在于映射中，则更新其对应的值 value 。int get(int key) 返回特定的 key 所映射的 value ；如果映射中不包含 key 的映射，返回 -1 。void remove(key) 如果映射
2022-05-16 20:44:49
73
原创 705. 设计哈希集合
题目要求不使用任何内建的哈希表库设计一个哈希集合（HashSet）。实现 MyHashSet 类：void add(key) 向哈希集合中插入值 key 。bool contains(key) 返回哈希集合中是否存在这个值 key 。void remove(key) 将给定值 key 从哈希集合中删除。如果哈希集合中没有这个值，什么也不做。示例：输入：["MyHashSet", "add", "add", "contains", "contains", "add", "conta.
2022-05-16 20:37:00
312
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人