- 博客(6)
- 资源 (1)
- 收藏
- 关注
原创 用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关注的人