冰sir2021-优快云博客

原创用VUE手撸一个视频播放控件

不说废话，先上图1、视频播放之前，有一张封面图，中间有播放按钮，点击可以播放2、有单独的控制悬窗3、可以控制视频播放、暂停4、有时间显示，包括当前时间和总时长，时间显示为分钟：秒数，单位数补零5、有进度条随播放进度推进，拖动可以跳转到指定时间位置6、控制悬窗可以显示和隐藏，点击视频区域可以调出或隐藏控制悬窗，在视频悬窗无操作5秒后自动隐藏7、播放完成后，回到视频最初始状态1在video元素中主要用到的元素信息包括：1、主要方法：play() //控制视频播放pause()

2021-09-08 14:47:25 699

原创用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 976