- 博客(19)
- 收藏
- 关注
RSS订阅原创 播放暂停功能
watch api通过currentSong拿到url，赋值给audio，ref api 拿到audio。获取fullScreen和currentSong，使用useStore api拿数据。定义watch函数，看playing数据的变化，操作audio这个dom。v-show="fullScreen"控制播放器全屏展开还是收缩，根据不同playing的播放状态求得playicon来改变图标。绑定点击事件 click=“togglePlay”播放器时全局组件 在app.vue引入注册。
2023-07-28 20:09:06
158
1
原创 歌手详情页
数据是异步获取的，在singer-detail中loading默认值为true，加载完变为flase，再传递给music-list。2.设置一个动态style，定义scrollStyle，top值跟imageHeight一样。back返回键、bg-image图片层、title标题、song-list可滚动列表另封装。(1)获取scrrolly，通过zIndex控制，如果滚动超过距离，提升层级。定义scrollY：滚动的距离，在onScroll赋值。(2)设定宽高默认，动态改变。2.获取滚动距离，高度。
2023-07-26 21:34:16
38
1
原创 批量获取歌曲
song.map((song))映射拿到mid。vkey加密策略 增加过滤（筛选播放。singer-detail增加逻辑。如果有数据 发送get请求。
2023-07-24 21:08:46
59
原创 歌曲列表数据获取
singer.vue加router-vie组件：渲染singer-detail。singer-detail.js发请求（异步）singer.js中封装函数。定义select在传递路由。index.js中挂载。
2023-07-24 21:00:23
40
原创 歌手列表快速导航入口
（2）把索引绑定到data-index，使用BetterScroll中的scrollToElement（）方法。1.获取每个组的标题构成shortcutList，即currentIndex的响应式数据，用钩子函数封装。利用Touchstart的第一个纵坐标减去TouchMove的第一个纵坐标的插值加上初始索引delta。（1）绑定事件，阻止冒泡，阻止默认行为。3.实现手指拖动切换对应的组。2.实现点击切换对应的组。
2023-07-23 19:37:31
35
原创 歌手列表固定标题实现
4.监听滚动到哪个区间内，获取索引和标题。回调函数onscroll 纵向滚动值。distance是区间到顶部的距离。计算列表高度区间，ul里的li。3.自定义事件emit。
2023-07-21 21:08:23
26
1
原创 v-loading自定义属性的开发
创建directive.js指令，通过v-loading把loading组件动态插入recommend.vue。recommend.vue中添加计算属性。在main.js引入指令。
2023-07-19 20:57:06
38
原创 滚动组件封装
插件observeDOM：自动检测dom元素来刷新计算 在这里插入图片描述。拓展参数options，useScroll传递rootRaf props。
2023-07-18 21:24:52
29
1
原创 轮播图组件的开发与使用
1.使用components api方式，使组件和BtterScroll配合。slideWillChange事件：当currentPage改变时即触发。onmounted函数中初始化新建BtterScroll。BtterScroll实现轮播图（slide插件）2.用ref api拿到dom结构。onUnmounted销毁。
2023-07-18 20:59:21
93
1
原创 获取轮播图接口数据
创建新的文件service 存放base.js 和 recomm.js。封装get函数，调用axios.get,请求url，传递params。拿到轮播图和推荐歌单数据 通过get发送请求到后端 url与后端一致。开始生命周期中发送请求，调用getRecommend()判断返回数据serverData.code。
2023-07-17 21:22:21
120
1
原创 tab组件
3.router>index.js 引入导航组件，配置路由。.router-link-active点击增加高亮效果。2.App.vue引用tab.vue组件 注册使用。:to="tab.path点解切换path。1.tab.vue 存放数组对象。
2023-07-17 21:01:38
54
1
原创 网页时钟案例
小时角度公式：小时 * 30 + 分钟 / 60 * 30。分钟角度公式：分钟* 6 + 秒 / 60 * 6。秒角度公式： 当前秒数 * 6。页面加载时主动调用一次，页面加载之后就要调用一次。2. 多次定时器，重复获取时间，让指针动起来。1. 创建日期对象 获取当前时间。通过定时器每隔一秒钟再调用一次。
2023-07-16 22:47:30
66
1
原创 节点操作 dom节点
2.parent.insertBofore(child, refChild) 将child元素添加到refChild的。追加节点：1.parent.appendChild(child) 将child的元素添加到parent元素里面去(最后面)一：节点-查: 父级: parentNode 子集: children。创建新的节点：document.createElement(标签名称)三：节点-删：parent.removeChild(child)四：克隆节点：元素.cloneNode(true)
2023-07-16 22:39:43
41
1
原创 日期对象：倒计时js
h = parseInt(总秒数 / 60 / 60 % 24) // 计算小时。m = parseInt(总秒数 / 60 % 60);s = parseInt(总秒数 % 60);确定想要倒时的时间，使用+new Date求出时间戳，利用公式换算。
2023-07-16 22:30:08
60
1
原创 【无标题】
解绑事件：addEventListenerf方式，必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)案例运用：添加 删除 this.list = this.list.filter(item => item.id!条件渲染指令（v-show、v-if、v-else、v-else-if）v-else、v-else-if 紧接着 v-if 使用。内容渲染指令（v-html、v-text）列表渲染指令（v-for）v-key唯一值。事件绑定指令（v-on）
2023-07-15 21:29:14
37
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人