- 博客(6)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 用VUE手撸一个视频播放控件
不说废话，先上图 1、视频播放之前，有一张封面图，中间有播放按钮，点击可以播放 2、有单独的控制悬窗 3、可以控制视频播放、暂停 4、有时间显示，包括当前时间和总时长，时间显示为分钟：秒数，单位数补零 5、有进度条随播放进度推进，拖动可以跳转到指定时间位置 6、控制悬窗可以显示和隐藏，点击视频区域可以调出或隐藏控制悬窗，在视频悬窗无操作5秒后自动隐藏 7、播放完成后，回到视频最初始状态1 在video元素中主要用到的元素信息包括： 1、主要方法： play() //控制视频播放 pause()
2021-09-08 14:47:25
697
原创 用VUE手撸一个音乐播放控件
由于公司业务需要，需要在H5页面中播放音频。根据提供的UX大概是这个样子的 分析一下主要功能： 1、点击左侧按钮可以控制音频的播放和暂停。 2、时间随着音乐的播放实时变化，同时需要显示总时间。 3、中间进度条，随着音乐播放实时变化，另外用户主动拖动，可以拖动到对应时间位置。 基于以上需求，先进行UI的绘制，由于项目中使用了vant UI框架，所以拖动条直接用vant中的slider滑块即可 h5代码如下 <div class="player"> <div class="butto
2021-08-31 16:27:46
767
原创 在Vue中如何缓存页面
在Vue中经常会遇到需要缓存页面的情况，如果不对Vue进行处理，那么Vue默认是不会缓存页面的。例如从菜谱列表界面进入到菜谱的详情页后，再从菜谱详情页中返回到菜谱列表页面中时，菜谱列表是不需要进行刷新的，一个是增加了不必要的网路请求，第二个是如推荐菜谱后台是实时推荐的，每次请求的数据都不一定一样的，这样在用户退出后甚至找不到之前的进入位置，造成了很不好的用户体验。类似的情况还有很多，那么如何在Vue中控制页面是否刷新呢？ 公共处理 首先需要在App.vue进行处理，通过meta中keepAlive字段
2021-08-31 16:26:19
4464
原创 Vue双向数据绑定的原理与实践
1、Vue双向数据绑定的原理 说到Vue的双向数据绑定，就得提到一种方法，就是数据劫持；Vue就是通过数据劫持，结合发布者-订阅者模式实现的，而此方法实现的核心离不开js中对象的一个方法，即： Object.defineProperty(data,'name',{}) //data为要操作的对象 //name对应监听的具体属性名称 //第三个参数未对应属性的描述，及具体怎么样操作对象数据 Object.defineProperty方法用来监听对象中数据的变化，该方法有三个参数，第一个参数为要操作的对象，第
2021-08-06 11:39:16
249
原创 JavaScript 代码运行前的预处理-执行上下文对象
先看一段代码： console.log(a); //在变量a定义之前，直接输出a，输出a的值是多少？会有报错吗？ var a = 1; console.log(a); //定义之后，肯定会正常输出a的值 来看一下结果： 看到这小伙伴们是否有疑问，在变量a定义之前，进行打印a的操作，竟然没有报错，输出的结果是undefined，这是为什么呢？我们学习js的时候，知道变量未定义是不能直接使用的，如下图，那么这个地方为什么没有报错呢？ 很多编程语言在执行代码之前会进行代码的预处理，同样js亦是如此。在代码执
2021-08-06 11:35:29
164
原创 子元素在父元素居中的常用方法-CSS
在前端开发中，经常会遇到子元素需要在父元素居中的情况，而对应的css方法也是多种多样的。子元素在父元素的居中问题也是在面试中经常被问到的问题，本文总结了在日常开发中最经常用到的几种方法，供大家参考。 ### 1、未知元素大小 - ##### 1.1 子绝父相布局，top、right、bottom、left都设为0，margin属性设为auto ``` #father{ position:relative; width:400px; height:400px; backgrou...
2021-08-06 11:23:43
975
基于Vue的手写视频播放控件
2021-09-08
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人