- 博客(6)
- 资源 (1)
- 收藏
- 关注
原创 用VUE手撸一个视频播放控件
不说废话,先上图1、视频播放之前,有一张封面图,中间有播放按钮,点击可以播放2、有单独的控制悬窗3、可以控制视频播放、暂停4、有时间显示,包括当前时间和总时长,时间显示为分钟:秒数,单位数补零5、有进度条随播放进度推进,拖动可以跳转到指定时间位置6、控制悬窗可以显示和隐藏,点击视频区域可以调出或隐藏控制悬窗,在视频悬窗无操作5秒后自动隐藏7、播放完成后,回到视频最初始状态1在video元素中主要用到的元素信息包括:1、主要方法:play() //控制视频播放pause()
2021-09-08 14:47:25 546
原创 用VUE手撸一个音乐播放控件
由于公司业务需要,需要在H5页面中播放音频。根据提供的UX大概是这个样子的分析一下主要功能:1、点击左侧按钮可以控制音频的播放和暂停。2、时间随着音乐的播放实时变化,同时需要显示总时间。3、中间进度条,随着音乐播放实时变化,另外用户主动拖动,可以拖动到对应时间位置。基于以上需求,先进行UI的绘制,由于项目中使用了vant UI框架,所以拖动条直接用vant中的slider滑块即可h5代码如下<div class="player"> <div class="butto
2021-08-31 16:27:46 651
原创 在Vue中如何缓存页面
在Vue中经常会遇到需要缓存页面的情况,如果不对Vue进行处理,那么Vue默认是不会缓存页面的。例如从菜谱列表界面进入到菜谱的详情页后,再从菜谱详情页中返回到菜谱列表页面中时,菜谱列表是不需要进行刷新的,一个是增加了不必要的网路请求,第二个是如推荐菜谱后台是实时推荐的,每次请求的数据都不一定一样的,这样在用户退出后甚至找不到之前的进入位置,造成了很不好的用户体验。类似的情况还有很多,那么如何在Vue中控制页面是否刷新呢?公共处理首先需要在App.vue进行处理,通过meta中keepAlive字段
2021-08-31 16:26:19 4295
原创 Vue双向数据绑定的原理与实践
1、Vue双向数据绑定的原理说到Vue的双向数据绑定,就得提到一种方法,就是数据劫持;Vue就是通过数据劫持,结合发布者-订阅者模式实现的,而此方法实现的核心离不开js中对象的一个方法,即:Object.defineProperty(data,'name',{})//data为要操作的对象//name对应监听的具体属性名称//第三个参数未对应属性的描述,及具体怎么样操作对象数据Object.defineProperty方法用来监听对象中数据的变化,该方法有三个参数,第一个参数为要操作的对象,第
2021-08-06 11:39:16 206
原创 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 123
原创 子元素在父元素居中的常用方法-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 798
基于Vue的手写视频播放控件
2021-09-08
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人