- 博客(30)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 react实现虚拟键盘支持Ant design Input和普通input Dom元素
3.使用window Selection对象获取获取焦点输入框光标对象信息，从而获取：当前输入框的值，光标开始位置和结束位置等信息。点击虚拟键盘上，值在输入框（Ant Design Input、或Dom inpu）中响应对应的值，支持在光标位置进行输入字符和删除等 操作，支持响应input onchange事件等功能。例如： 输入框值value=123|456，光标在3和4之间，selectionStart = 3, selectionEnd=3;1.点击虚拟键盘，发送点击按下按键的指令；
2023-12-11 14:03:09
340
原创 react列表手势触摸拖拽元素和滚动条冲突问题
1.场景：列表支持手势touch触屏，列表支持手指上下（或左右）滑动进行滚动，手指点击listItem元素可拖拽元素。3.解决方案：300毫秒以内，判断用户手势滑动角度判断用户手势滑动是横向滑动操作类型：拖拽事件、滚动条事件两种类型。垂直方向：在不可取的方向上进行滑动，执行y轴方向滚动事件；3.2 x轴有滚动条例子：和y轴方向处理方案相反。2.问题：滚动条事件和手势touch事件冲突。水平方向：在可取范围手指拖动，执行拖拽事件。这样就能避手势触摸滑动和滚动条事件冲突问题。
2023-11-23 18:26:33
349
原创 ChunkLoadError：Loading chunk 538 failed
网上有很多解释和解决方案，这里不多说。出现乱码原因：文件断电加压过程中文件没有正常减压，导致文件乱码，加载页面时异步加载页面过程没有找到对应组件抱错。备注： 两台控台装同一个版本软件，左边是控台没有白屏的js文件代码，右边是当前出现问题控台对应js文件代码，可以看到右边文件文件出现乱码。解决方案：确保加压过程，不要出现错误，不要异常中断或抱错等场景。文件正常减压之后，页面即可正常访问。现象：加载页面时，页面空白。
2023-08-10 10:13:51
783
原创 React状态管理
然而，倘若不设置一个默认函数，onSelect属性就是未定义的，点击FaStar组件时将报错，因为onSelect的值必须是一个函数。每次调用setSelectedStars函数修改selectedStars的值， useState钩子都会调用StarRating函数组件，使用selectedStars的值新重新渲染，钩子函数的强大就在这里。把组件变成可点击，使用React状态存储和修改它的值，状态通过React的钩子特性纳入函数组件。我们把状态存储在应用的根组件，然后把颜色向下传给子组件，负责渲染。
2022-09-27 11:53:48
2290
1
原创 JavaScript函数式编程
如果你需要对外公开自己的出生证明，但是想去掉隐私信息，你有两种选择：把隐私信息涂掉或找一台复印机，复制一份出生证明，然后涂改副本式更好的选择，及处理了出生证明也保障了原件的完好无损。应用中的不可变数据就是这个意思，我们不能直接更改原始的数据结构，而是创建数据结构的副本，所有的操作都使用副本。toString变成了纯函数，传入person做计算，返回一个新的person对象，而不更改传入的参数，因此没有副作用。在采用函数式分割的程序中，数据式不可变的，永不可修改的。纯函数也是函数式编程的核心概念。
2022-09-26 17:50:27
348
原创 模板字符串
在javascript代码中拼接html字符串是一件不容易的事情，而且代码可读性不好。不用再一行把所有内容都写全了或者不停的些多个加号把字符串拼接，繁琐而且容易出错。使用模板字符串可以更好的组织html代码,支持空白也错误文本的一部分，可直接插入格式化的html代码，便于阅读和理解。模板字符串为字符串拼接提供了一种新的方式，还可以在模板字符串中插入变量。`***${变量}***${变量}***`为什么要使用模板字符串？
2022-09-26 11:27:37
2147
原创 React memo使用解决高频组件渲染问题
新增一个名字为New Cat的Cat，添加到数组之后，即使memo包囊的子组件PureCat，子组件依然被重复渲染了。因为cats发生变化，state重新计算，导致父组件重新渲染，导致edit重新生成了新的方法，子组件props中edit发生了变化，导致子组件重新被渲染了。解决思路：子组件用 React.memo() 包裹，如果组件在相同 props 的情况下渲染相同的结果，React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。期望：子组件不要频繁的渲染，只渲染新增或发生变化数据的子组件。
2022-09-26 10:26:45
794
原创 async/await 在同步中实现异步
1.在遇到await test_sync(max) 时，没有立即打印“test end”,说明在此处等待请求响应。2.绿色日志“main start”和main end先打印，说明主线程已执行完成。红色方框是同步实现的异步代码执行结果，绿色方框是主线程的执行。首先，await不会阻塞主线程，而是在同步方法中实现异步的逻辑。相当于在promise成功的回调函数中执行await之后的代码。3.接着输出异步请求打印的日志0-9。4.最后打印test end日志。
2022-09-22 17:40:17
571
原创 Vue前端项目图片管理
场景：项目中使用的图片icon，怎么管理才能更好的提高性能，简化代码，减少图片资源内存等问题。方案一：雪碧图方案二: icon font，使用本文重点讲一下icon font这个步骤由UCD来设计完成。一般来说，首先要在阿里iconfont网站创建一个项目，免费的。然后再svg图片上传到该项目下。会自动生成iconfont字体库。......
2022-08-29 17:41:47
939
原创 highcharts饼状图点击选中或鼠标悬停高亮其他置灰问题
场景：鼠标进入（或点击）饼状图区域，高亮该区域，其他区域灰白色。想要去掉置灰功能，百度好久都没有查到对应的API相关配置，无奈之下只能通过CSS样式了实现。现状：未选中模块：背景色、标签字体、链接线透明度变成opacity:0.2，导致整体置灰效果。期望：未选中的模块整体颜色跟正常保持一致。通过CSS来实现控制达到期望的效果。
2022-08-22 10:08:59
1774
1
原创 ValidationObserver和ValidationProvider实现from表单字段间依赖校验
核心代码：ValidationProvider的rules中传入校验规则和依赖字段对应的值，在校验函数中获取到当前输入的值及依赖字段的值，然后根据date校验器校验：当前阶段结束时间大于上一个阶段的结束时间逻辑完成依赖校验逻辑，校验失败返回错误消息。使用 ValidationProvider和extend来实现依赖校验逻辑，用extend定义好依赖校验逻辑，在组件ValidationProvider的rules属性中传入校验规则和参数，就可以完成依赖校验及提示对应的校验不通过错误信息。...
2022-08-15 11:30:43
1377
原创 Android学习登录页面 - 第一天
第一步在app/res/layout/fragment_home.xml中实现登录页面。解决方案前期手动敲代码实现页面，不依赖于UIdesign功能，加深记忆和深入思考。b.拖拽对应的文本、输入框、按钮等到布局中，调整样式使得页面布局样式能好看一点。3.感觉页面实现有点low，有没有关于androidUI组件库。1.描述实现登录页面功能用户名、用户密码、登录按钮。1.Android页面加载逻辑及底层实现原理？附登录页面代码****手动敲的代码****2.页面事件注册及校验逻辑？...
2022-07-27 11:43:14
651
原创 Web前端页面访问权限控制总结
登录是获取用户权限模板URL列表，定义filter过滤器，获取当前请求url，在权限列表中判断访问接口URL路径是否在用户权限列表中，如果在则URL鉴权通过，否则鉴权失败返回鉴权失败信息。，前端不做页面控制，有后端进行权限控制。-后端进行权限控制，基本上能避免绕过前台接口调用接口的问题，但是能看到不能访问一些菜单，给用户的体验不太好。，前端控制页面访问权限，后端不做接口权限控制。前后端在获取用户权限列表之后通过判断用户权限是否包括某个权限点，有该权限点则鉴权通过，否则鉴权失败。...
2022-07-22 18:11:56
4313
1
原创 【极光统计】极光和H5(Web)混合开发实现用户行为统计集成
一、因极光官方提供的Web端集成API接口中没有提供页面统计的接口，故需要App提供一个页面统计的接口，由App跳转到H5页面时，调用页面埋码接口进行页面统计。开发模式app和h5混合开发。
2022-07-22 16:53:12
771
原创 Vue防抖节流
vue防抖-可以搜索输入框，输入多个字符进行搜索，当输入停止之后进行搜索操作者。--可以用于用户点击按钮事件防抖操作。1.多次操作只执行第一次操作。2.多次操作只执行最后一次操作。
2022-07-22 15:59:34
4780
原创 Vue响应式操作包括简单数据类型、对象、数组、树状结构总结
1.简单数据类型：Boolean、Number、String直接赋值：this.value = "张三"； // 页面上显示的值会更新成“张三”2.对象 Object假设组件data代码如下： data() { return { formData: { name: "李四" }, // form表单 }; },通过当前组件实例化对象 this.$set改变属性的值，代码如下：this.$set(this.formData, "name", "张三"); /
2022-07-07 09:36:38
2328
原创 Vant picker选择器设置默认值导致选择器失效
vant 版本 >=2.12.27场景：自定义选择器数据结构是数组对象，picker默认显示第一个或上传选择的项。html 代码：js代码：问题：选择器的在做选中，点击确认时，选中的值没有发生变化，还是未切换选择之前的值。问题定为：js代码中行位置： this.defaultIndex = this.value; // bug在这里。问题分析：这里服务器使用的key值，导致服务器计算picker选择的索引index出错，用户选中picker值的某一项，然后点击右上角的“确认”按钮，picker
2022-07-06 16:07:50
5272
原创 Vue Vant粘性布局使用
使用场景：手机端页面上向上滚动的时候，需要把特定的内容粘在屏幕的上方。支持多个内容块进行粘性布局。页面结构：从上到下headertabs - tab过滤条件列表诉求： 需要把header/tabs/过滤条件依次浮动在屏幕上方，不互相覆盖。实现方案：heaer使用fixed固定在屏幕上方tabs和过滤使用粘性布局。tabs的offsettop设置成tabs距离窗口顶部的位置。过滤条件设置offset top设置成tabs offset top+tabs本身高度的和。...
2022-06-15 18:13:44
982
原创 Vue根据模板动态显示内容
使用场景：前台配置显示模板，后台返回的数据，前台根据数据模板动态渲染页面。优点：开发一个公共的页面，每个页面对应一个模板，减少不停的开发页面。把写页面和样式的重复工作用代码来实现，减少开发工作量。缺点：每个页面对应一个模板，模板里面需要配置页面内容。实现思路：1. 写一个公共的展示页面。2. 定义页面模板，及配置页面中每个字段属性。3. 根据模板把数据格式化。4.定义页面每个字段显示组件。比如：label、file、radio、checkbox等UI效果： 代码：1.公共UI展示组件CommonDispl
2022-06-15 17:58:45
2974
原创 Element UI Table实现可编辑表格+校验（行和行，列和列）
Element UI Table实现可编辑表格+校验（行和行，列和列）
2022-04-08 16:16:28
11211
原创 hightcharts折线图添加x轴滚动条及全屏效果
hightcharts折线图添加x轴滚动条及全屏效果第一步: 引入可滚动插件import HighCharts from 'highcharts'import highstock from 'highcharts/modules/stock'highstock(HighCharts);第二步：option配置文件中添加x轴滚动的配置：categories：[1, ..., 40] -- X轴坐标1到40。min: 10, max:20, --- 表示滚动.
2022-04-01 14:05:01
2081
原创 elementui tree default-checked-keys懒加载后出现全选的情况, 已解决
问题描述：使用懒加载方式渲染，一个树节点下有5个节点，设置 default-checked-keys默认选中n（1<n<5）个子节点，出现子节点全部被选中的情况。问题分析：使用懒加载方式选中子节点，tree在渲染的过程中是异步的，tree在判断所有子节点是否选中的过程中，计算得出所有的子节点全部选中，导致父节点被选中，父节点选中其下的所有子节点全部被选中。解决问题思路：解决方式一：check-strictly - 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 fa
2022-03-24 12:55:37
5573
4
原创 基于Vant实现多选下拉框
目的：多选下拉框1.支持多选2.支持重置和确认按钮备注：点击确认选择的项生效，如果没有点击确认再次弹出下拉框展示的是上次确认选择的值，而不是最后离开时的选项。先看效果图：MultiDropdown.vue 代码如下：<template> <van-dropdown-item ref="myDropDown" :disabled="disabled" :title="displayName || title" @clo...
2022-02-18 16:08:05
8254
转载 Web前端性能-Performance API性能详解
https://blog.logrocket.com/how-to-practically-use-performance-api-to-measure-performance/
2021-06-15 21:43:07
204
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人