- 博客(21)
- 收藏
- 关注
RSS订阅原创 CSS3动画效果案例
不久前做了一个h5项目，用到了css3的动画效果，需求是一个答题界面，四个选项从右到左依次渐入，完成的效果如下所示：这个效果可以用css3动画实现。这里我四个答案用的都是绝对定位，起始给定好left:3.75rem为屏幕宽度，也就是起始四个答案都距离左侧一个屏幕的宽度的距离，在屏幕显示区域外运用css动画，首先要创建动画，使用@keyframes@keyframes mymove { from { left: 3.75rem; } to { left: calc(50%
2021-03-17 15:44:35
1113
原创 H5移动端记一次图片裁剪合成功能
之前做了一个h5项目，核心功能是上传图片，进行裁剪后与其他页面部分合成到一个图片作为海报进行保存。实际做出来的功能如下所示，这里我是用pc浏览器的移动端页面模拟进行录制的，实际上在手机上的效果会更好一点：这个需求的要点主要在以下几点：图片上传后的裁剪，这个需要找到合适的第三方工具，并且支持移动端裁剪完的图片，会作为页面一个img标签进行显示，但还要与其他部分合成为新的图片，这个要借助第三方合成工具图片支持添加文字描述，合成到最后的海报中，同时合成包含若干个区域，需要合理的进行布局以裁剪到正确的部
2021-03-16 15:50:46
891
原创 H5音频播放功能的实现
前段时间实现了个h5移动端项目，需求中需要启动后自动播放音乐，并且多个页面中都有切换播放/停止的功能，功能界面大概如下图：采用的是vue，框架方面比较简单明了，播放的mp3资源直接在App.vue中引用，isPlayMusic属性记录好传递给每一个子组件页面，同时向子组件暴露播放方法playMusic和暂停方法pauseMusic即可。<div id="app"> <audio class="myaudio" src="./static/music.mp3" loop="loop
2021-03-15 16:08:39
3629
原创 h5移动端开发之禁用微信浏览器字体大小设置
h5开发过程中，无论是本地手机调试，还是发给客户预览过程中，经常首先会用微信浏览器打开，有遇到的问题是pc模拟器中正常，但是微信浏览器整个布局都是乱的，其原因是微信浏览器中的字体设置大小。如下，当字体设置为标准时，正常的页面呈现：而当字体设置为其它时，页面的布局就乱了：对此可以针对微信浏览器将字体设置为默认标准并且禁用字体大小调整，代码如下：(function() { if (typeof WeixinJSBridge == "object" && typeof Weixin
2021-03-15 11:43:28
1186
1
原创 H5移动端开发之基础字体大小设置
前段时间接触了h5移动端的开发，移动端字体大小不同于pc端一般直接用px单位，而是经常用rem作为基础单位，常规做法使用1rem=100px的换算方式，如果设计稿是375px作为整个屏幕端度的话，那么我们换算过的屏幕宽度则为3.75rem；如果设计稿是450px的话，屏幕宽度则为4rem。具体设置方法见如下代码：<script> fnResize() window.onresize = function () { fnResize() } function fnResi
2021-03-15 10:49:33
5442
原创 echart自定义tooltip文字
echart是流行的可视化工具，应用echart可以画出很多想象不到的炫目canvas效果。笔者作为前端工程师长期从事大数据可视化项目，对echart也有深度应用。再此前文章中也多次讨论过echart的各种应用场景，本文将针对echart当中的tooltip文字做全面的表述。echart中的tooltip是在canvas上的悬停效果的设置，位置在option下的一个属性：let option = {... tooltip: { ... }...}其中的基本样式和字体、背景等可以参考官网
2021-01-11 20:14:35
4220
原创 记录一次特殊页面布局的实现
最近接到一个需求，要做一个数据面板，展示可视化数据，具体的布局大概是如下这样的面板有8个模块，展示不同的可视化内容，布局横向平分，纵向，1、2、5、6高度为1x，3、4、7、8为2x，同时，这8个模块带有权限控制，用户会给分配1-8数量不等的权限。与需求方交流后大概了解到需求方的意图，同时给了以下几种可能出现的布局，以此类推。可以看出，并不是一个非常常规的按序布局，大概含义是如果后面有可以插空到前面的，需要进行插空布局。首先拿到需求，我们先看一下主要要处理的东西，我们能拿到的直观的是用户有权限的模
2020-08-06 01:57:55
157
原创 vue前端数据可视化echart实践经验（三）可视化功能封装
echart可视化的功能封装前面部分论述了可视化初始化与刷新，主要关注的是父组件如何与子组件通信确定可视化时机。本节描述子组件中具体可视化的步骤：1. 接父组件条件进行基础可视化option设置2. 请求后端数据封装可视化数据对象3. 根据局部条件将数据对象绑定到option4. 实际画图这里的option指的是echart里面的js对象，用过的都很熟悉了。下面将根据我们上一节所说的那个可视化例子来详述我们如何体现出这四步到方法级别，并且如何根据实际场景灵活运用的。以下是上节中的可视化案例：
2020-08-04 18:33:59
1044
原创 vue前端数据可视化echart实践经验（二）可视化初始化与刷新
echart可视化时机前面部分论述了可视化的组件细化，既然我们已经将它细化了，那么接下来讨论父组件将何时触发echart子组件的初始化和刷新。通过生命周期进行可视化更新？显而易见的一种方式是通过mounted()，created()等组件生命周期的方式。这种方式当然对于特别简单的场景是可以的，但是在实际可视化项目中，通常我们需要根据不同的请求条件直接对可视化进行刷新，比切换了日期条件、查看不同数据指标等，每次都销毁和重建组件是不实际的通过props变化进行可视化更新？vue组件通信的重要手段之一是
2020-08-04 11:32:41
910
原创 vue前端数据可视化echart实践经验（一）组件细分
echart在前端数据可视化中有丰富的使用方式，但是其也有一般通用的实践方式。经过多个项目，现将个人echart使用的经验总结如下：尽量将每一个echart可视化单独拆分为一个组件从代码习惯上来说，将不同的echart可视化拆分为组件是一个良好习惯。下面是一个例子，我们有频道偏好和内容产地偏好两个页面模块，其中频道偏好中有一个可视化区域，内容产地偏好有电视剧、电影、少儿、综艺四个区域在代码层面，通过下面组件结构实现频道偏好一个组件，内容产地偏好有1个父组件和4个子组件，父组件代码如下：将组
2020-08-03 18:45:39
617
原创 echart热力图项目
之前项目中运用echart热力图，在这里记录一下。项目中如何实践echartechart应用到项目起来很简单，大概分为以下几步：vue项目中下载echart：npm install echarts --save在组件中导入：import echarts from ‘echarts’给定一个有宽高的容器作为echart的画布如：<div class="echart-map">...
2019-12-23 18:58:52
3063
原创 一次完整的拖拽项目总结之（四）逻辑条件
按照需求当拖拽一个标签至当前仅有一个标签的逻辑块时，需要出现’交集/并集’的选择框，如下所示：首先从前端页面角度来说，弹出层要能在适时进行弹出，定位准确，在鼠标拖拽的位置；等待点击’交集’或者’并集’按钮，当点击弹出层内部时，弹出层不消失，而当单机弹出层以外部分时，弹出层能够消失。从数据逻辑的角度来说，正常的拖拽是到终点位置附近弹起鼠标即完成数据更新，对于需要弹出逻辑条件的时候，则要阻断数据...
2019-11-12 16:40:18
604
原创 一次完整的拖拽项目总结之（三）移动与定位
上文描述了拖拽标签的场景，本文详述标签移动过程中的定位，以及拖拽前后落位区域的情况。在鼠标点击->拖动->抬起的过程中，在不同时机均调用了isLocatedToWhere方法，该方法会返回目前被拖拽标签的位置。其基本原理是通过fallInDiv方法由外向内查找各个div容器，判断当前被移动元素的坐标中心点是否落入当前容器内。isLocatedToWhere最终返回一个代表位置的结构如...
2019-11-11 17:33:22
799
原创 一次完整的拖拽项目总结之（二）拖拽场景
在https://blog.csdn.net/juliotang/article/details/89386319一文中已描述，任何拖拽控件的行为都是mousedown->mousemove->mouseup的结合，在这个过程中，实际上是将对应元素设置为绝对定位在屏幕相应位置上移动，释放后，将元素归位。这个过程只是实现页面拖拽效果，而实际完成拖拽行为，将元素从一个位置移动到另一个位置...
2019-11-10 18:04:15
980
原创 一次完整的拖拽项目总结之（一）整体项目
在https://blog.csdn.net/juliotang/article/details/89386319这篇文章中描述了拖拽所基于的基础实现，最近在实际项目中实现了一个较复杂的拖拽功能，在此予以总结。项目基于vue+iview控件库，整体效果如下：整体功能上部是一个三级的标签结构，二级（蓝色）和三级（绿色）标签部分可拖拽，拖拽至下部面板；拖拽的标签可以实现在上部原始区域拖走后消失并且...
2019-11-09 15:40:46
402
原创 走马灯的实现
工作中业务需要的情况下，可能需要走马灯信息的显示。初看起来可能繁琐，但实际上只要设置定时器，通过与父级的相对定位，然后利用元素本身样式中的的left属性，就可以实现。具体来说看下例，本例以vue实现为例：外部元素id="scroll"是父级容器，设置为150px的宽度，内部id="scrollcontent"是我们希望以父容器作为参照进行滚动的元素，另外，当内容很短的时候，短到150px能够容纳...
2019-07-09 18:44:45
888
原创 拖拽功能实现
因项目需要实现一个基本拖拽功能，实现一个容器中元素列表的顺序可根据拖拽改变，先看具体sample实现：具体sample写在vue框架中，
2019-05-05 16:51:24
3433
原创 CodeMirror文字比对
因为一直想写一个文字比对的工具，所以研究了一下，采用了CodeViewer，官方地址：https://codemirror.net/CodeViewer的核心是代码编辑器，但是文件比对的话可以直接用它的merge插件MergeView因为我想放在自己的主站上，而我的主站采用angular7作为技术栈，所以这里以angular为例使用MergeView制作自己的文字比对工具Angular引用C...
2019-03-19 16:35:39
5709
5
原创 Vue更改elmentui table排序
因项目需要，更改elementui table排序方式，默认的风格为以下：点击正三角按钮，为从小到大排序；点击倒三角按钮，为从大到小排序；点击三角以外的表头区域，排序会在正序，倒序，默认三种状态切换。需求为以下：默认的图标需求方不满意，需要修改为更明确的指示方式，换图标从后端请求的数据默认按照日期升序，前端在起始时候需要设定第一列状态为升序对于任意一列只保留升序与降序两种状态，点击表头...
2019-03-18 11:34:00
5266
1
原创 Vue异步更新队列
之前在项目中遇到一个坑，需要将一个带有v-if的页面元素重新渲染，从而在一个方法中将绑定的data属性值连续进行置false和置true的操作，希望通过这样的操作让页面元素重新渲染，但是操作失败。之后查找原因后将问题解决，为了加深印象特写此文章。Vue的数据更新不是即时的，而是存在一个异步更新的队列，这个队列缓存所有在当前方法域内的数据变化，当相同watcher被监测到触发多次时，只会将最后一次...
2019-03-04 10:31:01
2814
原创 VUE动态路由
常规的路由前端控制，路由地址是静态的，后端通过匹配前端路由来派发权限；而有时根据需求路由需要后端控制，前端不设置默认的静态路由，后端根据权限下发整个路由表，前端根据取到的内容生成路由。静态路由存在于一个数组中，以下为一个典型的静态路由： routes: [ { path: '/', redirect: '/menu1' }, { ...
2019-02-27 10:19:13
2107
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人