- 博客(49)
- 收藏
- 关注
RSS订阅原创 Antd Tabs更改选项卡时销毁 TabPane
利用此属性即可摧毁隐藏的TabPane <Tabs destroyInactiveTabPane>一些题外话 这个属性还挺有用，为什么antd不将此属性加到API里呢？我觉得是出于性能方面的考虑，每次切换我们都要重新创建/销毁DOM，这样做非常消耗性能。而我们创建页面一般目的是重新加载数据，利用onChange 我们即可对数据进行重新加载而不用来回创建DOM，因此antd才没有加此属性。 tabs中英有一点小差异,英文会提示其使用...
2021-07-23 18:03:18
4161
1
翻译 useCallback如何使用(How to useCallback in React)
React的useCallback Hook可用于**优化React函数组件的渲染行为**。我们先通过一个示例组件来说明问题，然后使用React的useCallback Hook解决该问题。 请记住，React中的大多数性能优化还为时过早。默认情况下，React是快速的，因此所有性能优化都是可选的，以防万一开始变慢。 注意：不要将React的useCallback Hook与React的useMemo Hook混为一谈。尽管useCallback用于储存functions，但useMemo用于储存va.
2021-05-06 17:19:39
581
原创 React实现虚拟滚动列表
原理： 只渲染可视节点以减少DOM开销，提升加载速度以下代码是伪代码，具体实现看这如果你想在项目中使用复杂的虚拟滚动，可以看下react-virtualized。本文只提供虚拟列表实现思路实现步骤创建容器<div className="container"> <div className="virtual-container" /></div> .container { height: 200px; widt.
2021-04-09 14:59:33
1844
原创 React内联方式使用backgroundImage
针对项目内图片文件 <div style={{ backgroundImage: `url(${bgImg})`, ...extraStyle }} /> <div style={{ backgroundImage: `url(${require("./12.jpg")})`, ...extraStyle }} />针对Url <div
2021-03-27 15:08:01
2798
转载 React 实现一个水球图
代码来源于https://github.com/ant-design/ant-design-pro/blob/all-blocks/src/pages/dashboard/monitor/index.tsx个人代码实现
2020-12-01 18:17:42
948
原创 Antd DatePicker 限制日期 和 时间
DatePicker 限制日期不麻烦，直接使用disabledDate属性就可以实现，但如果有跨天的时间限制就稍微麻烦些，需要我们处理一些逻辑。具体可以看这里代码注意： 代码实现Antd版本为 3.x , 用4.x的小伙伴实现稍不同 | 我这里只限制到 小时和分钟，如还需要限制到秒需要自己加一些逻辑 <DatePicker showTime={{ format: "HH:mm" }} format="YYYY-MM-DD HH:...
2020-07-16 15:38:55
5682
4
原创 前端面试之道总结
知识点太多，把重点拿出来硬性记住，注意面试时这个知识点会以怎样的形式提问！！重点判断数据类型typeof 、instanceoftypeof对于原始类型来说，除了null都可以显示正确的类型instanceof 内部机制是通过原型链来判断所以不能用于基本类型Object.prototype.toString.call() 对所有类型都可以判断Array.i...
2020-06-27 10:41:45
649
原创 React新特性Hook
为什么会出现hook难以复用类组件之间的逻辑 生命周期中经常包含一些莫名其妙的不相关逻辑 类组件难以被机器和人理解 核心算法的改变在V16版本之前 协调机制 是 Stack reconciler， V16版本发布Fiber 架构后是 Fiber reconciler。新的架构使原来同步渲染的组件现在可以异步化，可中途中断渲染，执行更高优先级的任务。在React 17中，在...
2020-03-30 19:58:18
334
原创 IOS微信下问题3 软键盘关闭后页面上移
问题：在IOS上点击input框软键盘弹出，页面上移。点击软键盘上完成按钮软键盘关闭，但页面并没有下移。解决：监听软键盘弹起、关闭事件。在键盘关闭时对页面重新定位// 兼容部分ios手机input失焦后页面上移问题(function() { let myFunction let isWXAndIos = isWeiXinAndIos() if (isWXAndIos...
2020-01-12 21:28:59
416
1
原创 IOS微信下问题2 页面滚动失效
建议先看这篇文章 (-webkit-overflow-scrolling:touch)下面 说一下点击其他区域，再在滚动区域滑动，滚动条无法滚动 这个bug问题复现：由非滚动区域向滚动区域滑动，再迅速滑动滚动区域，此时滚动会出现bug在一个可上下滑动的区域，滚动条在最上面再向上滑动或滚动条在最下面再向下滑，松手后立即滑动滚动区域，滚动出现bug ...
2020-01-11 13:12:06
737
原创 IOS微信下问题1 底部导航栏导致标签位置偏移
何时出现：在IOS微信浏览器下，当浏览器内出现跳转产生url历史记录的时候，此栏就会出现导致的问题： 导航栏影响高度计算，此问题很少出现。模拟问题，用户打开一个页面，此时没有历史记录导航栏不存在。用户进行跳转有历史记录导航栏出现，在此页面正好存在非正常布局流元素（例position:”fixed”）针对底部定位，那ok完蛋，你在IOS偶尔就会看到元素会偏下 一个导航栏...
2020-01-08 22:05:51
1715
转载 -webkit-overflow-scrolling:touch及ios滚动问题
先贴原文地址目录1. -webkit-overflow-scrolling:touch是什么？2. 解决safari布局抖动的例子2.1 方案一2.2 方案二3. 探究-webkit-overflow-scrolling:touch偶尔卡住或不能滑动的bug3.1 保证使用了该属性的元素上没有设置定位3.2 如果添加动态内容页面不能滚动，让子元素height+1...
2020-01-02 16:38:11
770
原创 CSS投影 box-shadow
先看一个例子box-shadow: 2px 3px 4px rgba(0,0,0,.5);(1) 以该元素相同的尺寸1和位置，画一个rgba(0,0,0,.5) 的矩形。（之后称这个矩形为盒子）(2) 把它向右移2px，向下移3px。(3) 使用高斯模糊算法（或类似算法）将它进行4px 的模糊处理。这在本质上表示在阴影边缘发生阴影色和纯透明色之间的颜色过渡长度近似于模糊...
2019-12-30 20:47:35
711
原创 去除IOS微信下自带滚动回弹（橡皮筋效果）
先说结论： 可以去除滚动回弹,根据不同情况使用不同的方式。1.程序内没有滚动直接使用下面代码轻轻松松没毛病document.body.addEventListener('touchmove',function(e){ e.preventDefault() },{ passive: false })2.有滚动的情况下面是去掉微信自带的回弹的demo<!...
2019-12-03 22:25:07
2869
原创 CSS形成圆、平行四边形、菱形、梯形、饼图
参考《CSS揭秘》形状部分CSS揭秘pdf百度网盘链接提取码: yg3v圆（椭）圆、半（椭）圆、1/4（椭）圆 宽高相等，显示为圆；宽高不等，显示为椭圆border-radius: 10px 5px / 7px 10px 3px;// 使用（/）单独指定水平和垂直半径;斜杠两侧值类似margin、padding用法,分别设置左上、右上、右下、左下圆：borde...
2019-11-27 13:57:23
866
原创 设置小于宽度的边框
需求 设置一个小于宽度的边框方式1使用嵌套的两个元素，在子元素中设置边框以模仿一个小于宽度的效果<div style="width: 100px; display: flex; justify-content: center; background: tan"> <div style="width: 80px; border-bottom: 1px solid b...
2019-10-31 20:25:37
750
原创 结合antd-mobile选择器的行政区三级联动组件
（ 如果前面失效 链接: https://pan.baidu.com/s/1oqdihRVTknM_AdzX31oZzg 提取码: 54qx ）把上面下载的json文件放到下面同级文件夹下 参考这句引用let districtData = require('./location');老实说实现方法很简单，antd-mobile提供了组件，只是没提供国家行政区数据，我只是把数据‘交给’这个组件罢了。这里使用的是国家标准(GB/T2260)，也就是2016年的标准行政区。如果大佬有最新的数据，希望能分享一下。
2019-10-12 13:46:20
11225
1
原创 js 串口通信
以下方式可实现利用IE 中 ActiveX、mscomm32.ocx控件进行串口通信，没记错的话在IE8之后ActiveX就不能用了。这里给三篇文章参考文章1、文章2、文章3 Nodejs服务端，可以使用SerialPort读写SerialPort说明 serialport官网 Chrome下，在chrome扩展程序和App中使用chrome.serial读写串口 中文官网除...
2019-09-06 17:56:59
6602
原创 原型、对象属性以及原型链
想了解实例、构造函数、原型之间的关系可以参考红宝书原型部分用一张别人那里拿的图表示每个函数都有一个prototype（原型）属性prototype属性是一个指向对象的指针，被指向的对象即是原型对象原型对象包含可以由特定类型的所有实例共享的属性和方法，简单说在原型对象上定义的属性方法在实例中是共享的最有意思的是在原型对象中会自动获得constructor（构造）属性，此属性...
2019-08-16 15:18:50
327
原创 js 更改对象中的属性名
网上大多是利用JSON转为字符串再进行替换修改属性名var bbb = JSON.parse(JSON.stringify(aaa).replace(/Name/g,"title"));这样做会有2个缺点，1.如果属性值匹配到会被更改 2.属性名中有部分匹配到也会被更改 如下： var aaa = [ { Nam...
2019-07-22 17:30:52
9506
1
原创 Android 本地文件、文件夹操作
将字符串写入到文本文件中（可自动生成文件） 读取文件里面的内容 生成文件 生成文件夹 删除文件或文件夹 文件或文件夹重名将字符串写入到文本文件中（可自动生成文件） /** * 将字符串写入到文本文件中 * 需要makeFilePath方法 */ public static void writeTxtToFile(String st...
2019-05-31 17:50:05
2295
原创 Android原生方式获取经纬度
两种定位方式：GPS定位、WiFi定位优劣：如果项目定位要求较高还是建议使用三方地图库GPS定位相比Wifi定位更精准且可在无网络情况下使用，但在室内基本暴毙无法使用 WiFi定位没有室内外限制也不需要开启GPS但需要联网,另外测试发现WiFi定位时onLocationChanged函数（用于监听经纬度变化）触发间隔无法小于30s 下面是Wifi定位的代码public...
2019-05-21 17:38:26
12962
2
原创 Antd 表格样式修改
写一下最近使用Antd表格遇到的问题,如果遇到以下问题可以参考 (antd版本为3.16.3)修改表头、列表文字和背景颜色 去掉（修改）鼠标移到某行时的背景 修改选中某行时的文字颜色 设置奇偶行不同背景 看下table的标签，不同配置下有所不同但是主要标签都是相同的，像ant-table-thead代表表头ant-table-tbody代表列表内容。 ......
2019-04-24 09:30:31
23189
8
原创 async awit 实现axios继发与并发
在使用async awit之前先确定项目支不支持（不支持报regeneratorRuntime is not defined）使用webpack搭建的项目可使用这里提供webpack配置支持使用babel-preset-stage-3、babel-polyfill 或babel-plugin-transform-runtime 注意babel v6、v7版本配置稍有不同继发...
2019-03-07 17:38:28
950
原创 [mini-css-extract-plugin] Conflicting order between 和Entrypoint mini-css-extract-plugin = *
在对webpack2.+ 升级到 4.+之后，开发模式下编译出现以下两个warning以及虽然不影响正常使用，但实在别扭故开始找解决办法Conflicting order between找到的是github issues ,官方给出答复大意是在不同文件引入相同的两个css文件且顺序不同，就会导致警告。找到可用答案1.修改出现问题的js中css文件顺序 （我出现问题的...
2019-02-20 14:05:14
8765
3
原创 react-redux学习总结
react-redux比较简单的去理解react-redux https://www.jianshu.com/p/7a71181a7aa0redux原理分析 https://segmentfault.com/a/1190000012976767react + redux 完整的项目，同时写一下个人感悟(不是我的 233)https://segmentfault.com/a/1190...
2019-02-19 20:22:27
223
原创 JS数组操作
栈方法：后进先出 push\pop从尾部添加\删除项队列方法：先进先出 unshift\shift 从头部添加\删除项 添加的方法返回改变后的数组长度，删除的方法返回删掉的值，改变原数组。重排序方法：sort(排序) array.sort()返回排序后的数组。改变原数组。可以接收一个比较函数作为参数，类似如下函数返回布尔值function compare(value1,...
2019-01-31 16:20:57
523
原创 原型模式 理解原型对象
摘自JavaScript高级程序设计（第三版）page147-151 原型模式部分；写的真好，对理解原型对象帮助特别大原型模式 我们创建的每个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来理解，那么prototype 就是通过调用构造函数而创建的那个对象...
2019-01-31 11:45:49
219
原创 使用userAgent检测内核、平台、Windows 操作系统、移动设备..
使用代码来自JS高程设计第9章客户端检测方式: 能力检测：在编写代码之前先检测特定浏览器的能力。例如，脚本在调用某个函数之前，可能要先检测该函数是否存在。这种检测方法将开发人员从考虑具体的浏览器类型和版本中解放出来，让他们把注意力集中到相应的能力是否存在上。 怪癖检测：怪癖实际上是浏览器实现中存在的bug，怪癖检测通常涉及到运行一小段代码，通过代码检测系统方法是否是正常输出。...
2019-01-12 13:47:54
1240
原创 百度地图计算不同等级像素与实际距离比
本篇使用两种方式计算像素与实际距离比，两种方式都是根据百度地图提供的方法、信息计算。第一种 利用getDistance、pointToOverlayPixel计算两坐标的像素位置以及真实距离进而推算像素与实际距离比。 var pointA = r.point; var pointB = new BMap.Point(pointA.lng...
2018-12-29 09:59:04
5003
原创 百度地图Label文本居中
我们知道通过Label设置文本，内容会从坐标点往后展示。如果想让坐标在文本的中点，可以设置：label.setStyle({transform: 'translateX(-50%)'}); //label是Label的实例对象这是label标签原始样式这是改过后的，这里有left,top是因为我这里label是针对图片定位，设置left为图片长度的一半去掉图片导致的偏差值。...
2018-12-17 16:49:08
4692
原创 js 吸顶实现
效果：第一种实现：使用DOM主要思路是根据实时监听滚动条被向下拉动的距离，当其距离顶端小于某一值时使用position: fixed 固定。核心代码 //获取距离页面顶端的距离 let titleTop = tit.offsetTop; //滚动事件 document.onscroll = function(){ ...
2018-12-06 11:13:55
1993
原创 js常见数据类型转换
常见数据转换如下： Boolean Number String （使用String()转换） null false 0 'null' undefined false NaN 'undefined' '' 空字符串 false 0 0 false '0' true / f...
2018-12-01 14:11:03
146
原创 制作一个简单React移动端滑动切换组件
写在前边本文主要介绍如何实现滑动切换及遇到的问题，具体组件在这如果你需要的是轮播图，这里有两个轮子react-slick、nuka-carousel原生DOM操作，非React框架下也能使用我们想实现触摸切换无非是做以下三件事监听触摸事件判断用户当前操作是否是切换进行页面切换获取触摸事件先了解触摸事件要想监听触摸事件整个流程需要监听以下三个事件let li...
2018-11-19 22:36:16
4839
原创 CSS限制单行多行
限制单行overflow:hidden;text-overflow:ellipsis;white-space:nowrap;限制多行overflow:hidden;text-overflow:ellipsis;display:-webkit-box;white-space:pre-wrap;-webkit-box-orient:vertical;-w...
2018-10-11 17:58:01
4025
转载 React之key详解(转)
原地址：https://segmentfault.com/a/1190000009149186#articleHeader8写出来完全是因为自己不长记性啊，三次了因为给数组设置key={index}导致数据出问题，每次都找半天找不到问题。一个例子有这样的一个场景如下图所示，有一组动态数量的input，可以增加和删除和重新排序，数组元素生成的组件用index作为key的值，例如下图生成的...
2018-09-13 16:53:07
455
原创 rcform
react-component/formhttps://github.com/react-component/form#option-object yiminghe/async-validatorhttps://github.com/yiminghe/async-validator/import { createForm } from 'rc-form';clas...
2018-08-30 18:31:35
700
原创 百度地图获取本地搜索(LocalSearch)全部结果并显示标注
业务需求：获取一定范围内百度地图中所有店面（以下代码实现的‘一定范围’指圆，显示某检索值下所有地图返回的店面） var circle = new BMap.Circle(point,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3}); map....
2018-07-18 11:31:30
27023
3
原创 使用antd-mobile ImagePicker组件 七牛上传图片（排坑）
项目需要一个添加多张图片再把图片url传给后台的组件（嘛，照片选取用ImagePicker就好啦）大体样子如下主要问题是在使用七牛取到url之后的存取问题下面主要讨论使用ImagePicker换行时browse_button对应id出现的问题。另外说一下移动端如何让id对应按钮直接调起相机以及图片压缩的方法。（使用七牛js版本为1.x,静态文件方式引入，antd-mobile使用...
2018-06-28 18:07:49
10883
11
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人