- 博客(85)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 如何捕捉H5端的快速滑动动作
在一些H5触摸屏的项目需求中，经常会出现需要捕捉手指在屏幕中快速滑动动作的需求。然而，往往这个需求也同时需要兼容慢慢滑动这个需求。比如picker相关系列的组件，都有这个功能点。那么，他们是怎么实现的呢？
2023-04-11 19:27:25
610
1
原创 使用css和canvas实现鼠标长按环形进度条
需求鼠标长按圆形按钮，实现环形进度条效果。一开始做了css的效果，但是css的圆环看起来不圆，所以就用canvas，但是canvas也有缺点，首先是锯齿严重，其次是渲染不方便，需要调用生成N个实例。还是得根据具体使用场景来选择方案了。效果代码案例由于文字部分自定义需求比较大，就不写死了，有需要可自行定义，可参考 drawTextCB回调<!DOCTYPE html><html> <head> <meta charset="UTF-8" /
2021-12-13 10:12:38
1048
原创 维护老项目，临时写个jquery的select联动组件
代码赶任务，bug后面慢慢修复，也没有做联动数量限制。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .jq-cascader { display: inline-block; border: 1px solid #ccc; cursor: point
2021-11-03 15:00:10
434
原创 使用jq简单实现滚动定位到指定元素
前言滚动是一个很常用的属性，我们需要对它很熟悉，不然就容易踩坑。比如我今天想通过几行简单的代码实现滚动到指定元素上，却遇到了一个坑。即offsetTop 到底是以谁作为父级容器来计算距离？offsetParent又是什么？用到的apioffsetTopHTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。offsetParentHTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（
2021-10-12 15:33:47
2887
原创 在window系统上对web项目进行safair兼容测试
在window系统上对web项目进行safair兼容测试公司需求：需要在safair上进行兼容测试，但是没有mac解决方案：通过安装虚拟机，在虚拟机上装一个 mac os下载 virtual Box下载网址：https://www.virtualbox.org/wiki/Downloadswindow系统请选择 Windows hosts下载 mac 系统比VMware更简单的安装MacOs教程：如何在虚拟机virtualBox上安装MacOs系统命令行参考（必须通过管理员进入cmd,否则可
2021-10-12 13:45:31
210
原创 bootstrap-table异步ajax请求无限刷新
bootstrap-table出现无限刷新原因: 假如下面的代码list为空数组，但是total又不为0，则会触发 bootstrap-table的刷新机制，从而无限刷新。 //初始化Table $("#table").bootstrapTable({ ajax: function (params) { var p = { pageNum: this.options.pageNumber, pageSize: this.options.pageS
2021-09-16 15:34:15
981
原创 写一个简单的转转小游戏
写一个简单的转转小游戏最近由于个人好奇，想实现一个H5的转转小游戏，于是写了一个简单的demo，可自行可定义转圈数，时间，以及加速减速等效果。效果图片以下代码可直接运行<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> &l
2021-09-09 11:25:39
188
原创 lineChart的markLine与markArea案例
lineChart的markLine与markArea案例图形案例先看看以下图形里有没有你想要的案例，如果有，它也就在以下的代码里code 案例import React, { useRef, useEffect } from 'react';import * as echarts from 'echarts';const MyDemo = () => { const myChart = useRef<any>(); useEffect(() => {
2021-08-13 13:03:28
987
原创 antd-pro v5版本的tab页签最简实践
antd-pro v5版本的tab页签最简实践前言网上找了很多资料，也看了好些个代码，总觉得他们写的太累赘了。其实官方自己也说了，antdpro做页签和他们的产品理念不符合才不做，但是不代表他们没给我们预留修改空间，但是找了好多代码都没找到一个合适的插件。经过对layout组件的一番研究，但其实官方团队还是给我们预留了空间的，所以我也就是依据官方的预留空间做了一个最简实践，只需要写一个组件，加几行layout配置代码即可实现页签功能。提醒该写法肯定是会存在性能问题的，但是一般的项目用用是没啥问题的。
2021-06-29 23:01:15
3843
23
原创 js大量数据计算性能优化
js大量数据计算性能优化测试相关内容1. forEach和for循环2. `indexOf`的效率问题3. 遍历时的浅拷贝4. filter和for的性能比较15. filter和for的性能比较26. 数据去重问题1 (数组去重)7. 数据去重问题2 (数组对象去重)测试相关内容浏览器版本：Chrome 89.0+ECMAScript： ES5+测试结果：多次测试随机取值数据量：100万或1000万–备注–由于是做大量数据计算的性能优化，基本不考虑百万级数据以下的计算。本次测试是为了检
2021-06-25 14:11:10
5019
1
原创 exceljs解析excel的日期出错
exceljs解析excel的日期出错excel数据js解析数据根据多次测试结果发现所有时间都多了8个小时，所以将数据结果各减去8个小时即得正确结果，那么原因呢？原因一般百度查询，发现原因1、excel的日期是以1900-1-0开始计算的，既1900-1-1就是1天；2、js的Date是以 1970-1-1 08:00:00 开始的；所以找到exceljs解析日期的源码看了一下，发现好像还是有8小时没减。它只做了1970年-70年的计算。不知道是不是exceljs的bug...
2021-06-08 17:55:30
1012
原创 echart 的legend没有颜色
echart 的legend没有颜色检查一下lenged.data的值是不是 string类型，string类型才会显示颜色。如下，否则就不会显示颜色... legend: { data: ['1', '2'], },...
2021-06-08 12:08:32
1559
原创 在ts-react使用Modal
在ts-react使用Modal创建一个 Modal父组件中使用创建一个 Modalimport React, { useState, forwardRef, useImperativeHandle } from 'react';import { Modal } from 'antd';type TableItem = { key: React.Key; name: string; diff: number; temp: number;};interface RefProps
2021-05-24 10:38:54
468
原创 Echarts折线过多的识别问题
Echarts折线过多的识别处理先看效果，鼠标悬停折线变粗，且在最右侧显示折线 id 或者 name实现代码 文档详细// ...省略N行 endLabel: { show: true, formatter: `{a}`, fontSize: 0, }, // 鼠标悬停 emphasis: { // 折线加粗 lineStyle: { width: 6,
2021-05-20 15:59:44
582
原创 antdPro之路由菜单配置
antdPro使用之路由前言配置案例最后前言antdPro v5 的router主要使用了umijs v2的路由routes 以及@umijs/plugin-layout，总的来说，非常好用。在快速搭建项目的过程中，我们不需要去关注菜单和面包屑等功能的细节。在工程目录的config中直接配置一下路由就完了。routes位置如下图示配置案例export default [ { path: '/user', layout: false, // 表示是否需要在loyout容器内显示，
2021-04-23 10:27:43
6453
3
原创 js中快速排序的优化历程
对sort的疑惑自从es6出现后，我们不知不觉就用上了sort进行排序，毕竟人家又快又好。那么sort究竟怎么实现的呢？参考了一下大佬的文章（三种快速排序以及快速排序的优化），我便悄悄拿起了键盘。思路分析这些我就不写了，请移步大佬博客参照，由于大佬使用的java代码，我便用js来进行验证一下。排序条件以及优化结果根据大佬的分析，数组排序要面对的有以下四种情况，我们用1w个随机值为例进行一下测试，结果如下:提示：由于每次随机值不一样，测试结果有一定出入，但大致应该差不多数组情况随机数组
2021-01-27 19:08:02
524
原创 treeSelect hook 实践
前言antd 的 treeSelect 用起来没 element 的爽快，因为我们在实际使用的过程中，老感觉它少了什么东西。比如在使用 allowClear 的时候，找不到清空回调；比如在使用 showSearch 自定义搜索内容后没找到想要的结果，怎么重置 treeData； 问题很多，官方文档都没有给出对应的解决方案，很是令人头大。然而，经过一段时间摸索后，我发现其实这也许不是 antd 的问题，只是自己对react不够熟悉的问题，嗯，一切的问题都只是因为自己太菜了。案例今天突发奇想，把项目中自定
2020-12-31 16:53:18
289
原创 js的防抖函数做了什么
用途在开发中经常会遇到一些频繁的事件触发，如 onscroll，oninput 之类的等事件。其实为了实现我们最终的功能，频繁触发的事件也许只有最后一次触发才是我们想要的，那么防抖函数就是干这个用途的。我们给它一个时间，告诉该函数，当前设定的时间内，只执行一次该函数，这样就减少了非必要事件的执行。案例现在我们设定一个案例来实践一下，比如说，我们在一次滚动事件，只想要滚动的最终值。<!DOCTYPE html><html> <head> <meta c
2020-12-22 17:01:18
122
2
原创 next Error: A required parameter (id) was not provided as a string in getStaticPaths...
next中的报错如下图原因这个报错的意思大概就是，getStaticPaths的返回值d的属性paths的内容必须都是string，因为对应页面地址栏的值都是字符串，毕竟地址栏请求不可能给数字到服务端export async function getStaticPaths(context) { // 假如id的值为数字，就会报错 return { paths: [{ params: { id: 1 } }, { params: { id: 2 } }], fallback: false };
2020-12-13 15:30:23
1417
原创 next的渲染
前言next可以实现服务端渲染，也就是在服务端就就获取数据生成一个html页面到客户端，那么怎么实现呢？案例实现我们做个小demo实现一下，很简单就两个步骤1、首先创建一个next官方脚手架项目npx create-next-app2、在pages目录下创建一个list页面，在api目录下创建一个list接口// 目录结构...pages| |--- list.js| |---api| |---list.js...// api里的list接口代码export defaul
2020-12-13 14:47:51
278
原创 next Error: React.Children.only expected to receive a single React element child
next中的报错如下图原因很常见的报错，next的组件下只能存在一个元素，以Link为例：case本身是一个jsx元素，span也是一个jsx元素，所以报错...<Link > case <span>1</span> </Link>...解决办法使其变成一个整体jsx元素就行了，无论你用啥包裹，空元素或者其他标签都行...<Link > <> case <span>1</span>
2020-12-13 10:03:56
302
原创 next中的样式写法
前言next是react的SSR的一种实践方案，今天记录一下next的样式写法。样式实现大致有以下几种内联样式css/less常规引入模块化引入css in js内联样式内联样式实现其实没啥好说的，算是css一种补充吧，和常规html的style相差不远 ... <div style={{ fontSize: 20 }}> 样式实现 </div> ...常规引入常规引入写法也很常见，包括less的也可以这么引入。但是它有个问题就是，全局都会受到该
2020-12-12 17:38:46
1467
原创 vuex的动态数据和方法的共享
前言在做vue单页面应用项目的过程中，有时候我们需要全局共享一个后台请求的数据，甚至还需要通过这个请求过来的数据进行一些计算。而我们常用的做法是，哪个页面需要就去请求一次这个数据，假如这个数据多处使用的时候，那么我们就需要维护多个请求，这样做好吗？这不好，这只会增加项目的代码量和维护难度。那我们要怎么去解决这个问题呢？而vuex刚好就是为此而生吧需求首先我们模拟一个需求：1、在A组件中，需要使用职位数据用于select选择；2、在B组件中，需要通过职位编号code获取职业名称name；3、A组
2020-12-07 10:29:29
860
原创 react在hook组件里边调用class子组件
前言优化代码的过程不是一蹴而就的，庞大的代码量不可能几天就能完成从class到hook的更替，那么在这个过程中，我们就很可能遇到在hooks组件里边调用class子组件这种情况；问题当我使用hook父组件调用中间件嵌套的class子组件时，点击过一次后再次点击，定义的ChildRef 发生了丢失，且报错了import React , { Component , useState} from "react"import { withRouter } from "react-router-dom"
2020-11-27 17:06:59
2369
2
原创 react中父组件调用子组件的方法
前言react中，我们经常会想到，通过父元素直接调用子元素的方法，实现高内聚的效果。而这个用法的写法却是，五花八门。如下所示：1、类组件中的使用React.createRef()优点：1、写法简单易懂缺点：1、假如子组件是HOC，就无法指向真实子组件import React , { Component } from "react"class Child extends Component { func(){ console.log("执行我") } render(){ r
2020-11-21 08:44:36
52383
11
原创 使用vue写一个移动端上下滑动的轮播组件
前言由于业务需求，需要一个移动端上下滑动的轮播图功能；由于没找到合适的轮子，所以自行写了一个；没有写定时器，有需要自行加个就行了；设计思路很简单，利用了css的动画来实现；效果先看看效果老规矩，上代码注意事项：1、用了elementUI的的两个icon2、图片请自行引入<!-- 上下滑动轮播图片查看 --><template> <div class="collection-preview"> <div class="img-
2020-11-17 17:42:30
1467
原创 在webpack工程里使用gulp实现指定文件上传
自动部署的意义省时、省力、省心配置环境以及包依赖需要下载一个nodejs需要全局安装webpack、gulp包构建工程1、在文件中初始化一个webpack工程npm init 2、安装包，这里只需要安装两个包npm i gulp gulp-ssh -d然后这个目录是这样的3、 准备好gulp代码先创建一个gulpfile.js文件，作为gulp容器代码如下const gulp = require('gulp');const GulpSSH = require('gul
2020-10-21 15:27:23
206
原创 给webpack打包添加打包时间
原因正常情况下构建的工程，一般都会自带这些信息参数，但是遇到一个老项目，并没时间参数，在做打包优化的过程中，都看不到打包时间，所以需要自己补上代码打包代码的核心代码中有个stats参数，里边就有startTime，endTime 属性，我们简单加工一下新增的打包时间代码 // 打包时间 const times = stats.endTime - stats.startTime; const minute = Math.floor(times / 1000 / 60); con
2020-10-19 10:49:14
4074
3
原创 在vue中使用v-model进行自定义组件双向绑定
v-modelv-model的用法很简单，也就是对输入框等表单组件进行双向绑定，常规用法如下: <input v-model="value" /> 那么，v-model是如何实现这个功能的呢？代码如下：<input :value="value" @input="value = $event.target.value" />原理v-model的实质呢，也是需要通过监听input元素value的变化来实现的，同时也去修改data变量value，input有自己的输入监听事
2020-09-23 11:33:23
992
原创 使用echarts在地图中使用dispatchAction
效果如下注意事项1、必须使用goe渲染地图2、同一个option只能存在一个series参数3、tooltip提示框默认跟随series参数展示4、通过地图区域的鼠标悬停事件，用dispatchAction触发城市锚点scatter对应的tooltip5、dispatchAction的seriesIndex必须加上代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <
2020-08-15 11:10:21
17853
2
原创 在vue、react里边使用Echarts自定义省市县地图
前言自定义地图很麻烦，需要各种网上找资源，csdn这个坑爹货，把这些地图资源的积分抬得老高，动不动就是四五十个积分。不过幸好，我们还有个马爸爸。阿里的开源做的相当棒，所以在此我们需要感谢阿里的开发者们，今天在公司大佬的指点下，我打开了 地图选择器，这是一个可以随心所以选择下载地图json数据的网站，地图的精确度也比网上那些贵的死的资源包要高。于是，我一时激动，写下了这片文章。现在话不多说，开始教大家随心所欲的实现想要展示的地图；先给看效果黔西南地图第一步：下载地图资源我们进入到 地图选择器
2020-08-13 18:39:24
1306
4
原创 使用简单的js实现圆弧布局
使用简单js实现圆弧布局如图所示效果代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> #circle{ width: 3
2020-07-23 16:43:53
1932
2
原创 使用css实现图片填充容器后居中
使用css实现图片填充容器后居中在图片展示的过程中，当我们在处理未知宽高的图片时，很多时候图片要么变形，要么只占了空间的一半，要么剧中，上下留白，左右留白，感觉很不好看。先看效果是不是你想要的：原图效果图css代码div{ width: 100px; height: 100px;}div > img{ position: static; display: block; width: 100%; height: 100%; -o-object-
2020-07-08 17:26:33
560
原创 webpack 命令行执行打包报错
webpack 命令行执行打包报错： webpack not installed Install webpack to start bundling: $ npm install --save-d报错截图原因执行成功的截图方法进行路由跳转时，组件重复加载两次。代码案例如下： this.props.history.push(`/xxx/xxxx?title=参数`)后面多次检查代码后发现，是在使用history.push()方法时，参数值为中文才会出现该问题，其他类型则不会出现该问题。原因仔细追究其原因，应该是在进行带参数跳转时，浏览器会自动对中文进行转码，然后又会导致router的history方法监听浏览器地址栏变化。也就
2020-06-29 19:56:34
3898
4
原创 使用vis-network根据节点坐标定位环形工具栏
使用vis-network根据节点坐标定位demo代码<!doctype html><html><head> <title></title> <style type="text/css"> body{ padding:0; margin:0; } #mynetwork { width: 100%; height: 600px; border: 1px solid l
2020-06-19 12:03:35
1800
2
sourcetree含注册证书
2018-11-05
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人