前端任务队列顺序依次执行

6 月 28 日
阅读 2 分钟
86
任务队列就是将多个任务形成一个队列,任务执行时按照队列顺序依次执行。在这里我例举一个场景:选择多个文件上传,文件上传的时候同时并发,假如用户选中3个文件上传,接口每次只能上传一个,此时我们就需要生成一个任务队列,让任务依次上传而不是3个任务同时上传。

css文字大小自适应

6 月 27 日
阅读 3 分钟
92
在页面编写中经常会碰到页面自适应的问题,也就是页面内部的元素会随着窗口的放大缩小而放大缩小,box可以通过calc + 百分比的形式做到页面自适应,但是box内的字体却无法做到这点,往往box自适应大小了,内部的字体还是原来的大小,看起来会非常别扭,下面就来css实现一下页面文字的自适应大小。
封面图

excalidraw手绘风格虚拟白板工具-本地运行

6 月 26 日
阅读 1 分钟
78
看到这个界面就说明启动完成了,会自动在浏览器打开页面这样就可以本地自由使用了流程非常简单,下载项目,安装依赖,运行若你还没有安装yarn的话,运行一下指令安装
封面图

函数是引用类型的

6 月 26 日
阅读 1 分钟
138
在JavaScript中,函数实际上是一种对象。当你定义一个函数a时,你实际上是在创建一个函数对象。这个函数对象可以拥有自己的属性,比如你在代码中给a添加了一个名为deps的属性。

全面了解Set构造函数

6 月 25 日
阅读 4 分钟
196
当然我们也可以在new的时候给Set添加参数Set对象允许存储任何类型无论是原始值还是对象引用,并且在Set中存储的值是唯一的(Set会默认对非引用类型的值去重),去重后的值按照顺序排列,相同值取首次出现的
封面图

构造函数的内部属性与原型属性

6 月 24 日
阅读 2 分钟
269
若给构造函数添加相同的属性则会覆盖在构造函数内部添加属性时,相当于给构造函数的实例创建一个自己独立的属性副本,这个属性是独有的,不会影响到其他实例。除了给构造函数添加内部属性外,我们也可以通过原型的方式添加
封面图

t-design的t-drawer的padding设置无效

6 月 22 日
阅读 1 分钟
289
开发的时候发现t-drawer的padding无论怎么强制设置为0都无效,例如: {代码...} {代码...} 又或者去掉style标签色scoped依旧无效 {代码...} 最后发现,原来t-drawer外层需要套一个div才可以,如果template里只有t-drawer时强制覆盖css是无效的 {代码...}

前端vite项目的启动加载loading优化

6 月 22 日
阅读 4 分钟
263
有时候我们在刚打开一个网站的时候,界面会显示资源正在加载中的提示,等待一段时间后就会显示完整的网页。这个行为叫前端项目启动白屏优化。用户在打开网页的时候,资源还没有完全加载出来,此时窗口会显示白屏的状态,为了让用户知道当前页面正在加载资源,我们应该给予用户提示,让用户稍等片刻。我们以vue3 + vite项...
封面图

vite依赖预构建-解决路由跳转重新加载页面

6 月 21 日
阅读 2 分钟
303
vite项目内路由跳转,有时候会直接刷新整个页面,此时终端会出现加载新的依赖优化项提醒vite有一个依赖预构建的功能,每次启动项目时,vite在本地加载站点之前预构建了项目依赖,并且依赖会缓存在node_modules/.vite 目录下。如果没有找到现有的缓存,vite会扫描源代码,并自动寻找引入的依赖项(即 "bare import",表示...
封面图

小程序自定义导航栏-高度设置

6 月 20 日
阅读 2 分钟
282
上图是正常的导航栏高度,你可以看到右上角胶囊下方是有一个间隙的,其实这个间隙分为两个部分胶囊上下间隙、主体部分与胶囊的间隙,请看下图:由此可以得出导航栏的高度公式:导航栏的高度 = 状态栏高度 + 胶囊高度 + 间隙高度 * 2 + 间隙高度状态栏就是上图红色的部分胶囊就是右上角的胶囊菜单部分间隙高度 = 胶囊上边...
封面图

闭包与防抖

6 月 19 日
阅读 2 分钟
376
在这里,我用了一个闭包让 i 这个变量变为私有存储,然后通过setShake保存闭包函数onClick,调用setShake函数就会产生防抖效果,在1000秒内连续触发则只会执行一次。
封面图

引用类型指向-变量交换

6 月 18 日
阅读 1 分钟
403
在 JavaScript 中,对象是通过引用来传递的。当你将变量 a 设置为 arr[0] 时,实际上是将 a 指向了 arr 中第一个元素所引用的对象。当你执行 arr[0] = arr[arr.length - 1] 时,只是改变了 arr 中第一个元素的引用,而并没有改变 a 的引用。换句话说,arr[0] 和 a 最初指向同一个对象,但当你执行 arr[0] = arr[arr.leng...
封面图

计算机常用转义符

6 月 17 日
阅读 1 分钟
383
有些时候,html标签或样式无法被解析,此时就可以试试计算机转义符符号说明?在书写连续多个问号时使用,防止他们被解析成三字母词\'用于表示字符常量\"用于表示一个字符串内部的双引号\b退格\f换页\r回车?问号\n换行\t水平制表符\v垂直制表符\dddddd表示1~3个八进制的数字。 如: \130 X\xdddd表示2个十六进制数字...
封面图

css元素从右往左的排列方式-聊天对话

6 月 16 日
阅读 1 分钟
330
类似这样的聊天对话排列方式,左侧的是正常排列,右侧从右往左排列这里用到了两个关键属性:fit-content:盒子大小自适应direction:修改元素排列方式所以这里需要单独处理右侧的排列方式,这里用到了direction属性,该属性可以修改元素的排列方向实际上页面元素是两个盒子嵌套大盒子使用direction: rtl;让元素从右往左...
封面图

CSS Modules变量导出在JS中使用

6 月 15 日
阅读 1 分钟
280
使用CSS Modules来导出变量。在SCSS文件中声明变量,并在JS文件中通过引入CSS Modules来使用这些变量。示例代码如下:在SCSS文件中定义变量:
封面图

echarts需要注意的地方

6 月 14 日
阅读 1 分钟
345
数据变化后要重新刷新echarts图标,这个时候需要使用:setOption(option, true); 这里的true就是重载图表的意思。
封面图

echarts获取折线图鼠标移入的当前列数据

6 月 10 日
阅读 2 分钟
408
echarts有几种事件可以获取当前列的数据(echarts事件API),但这些事件的使用体验并不好,都需要点击或移入折线本身才能获取当前列的数据。用户在使用折线图时,通常是鼠标划入折线图,出现浮窗,此时就需要立刻把浮窗的数据返回出来。在浮窗配置中有一个formatter,你可以在formatter中自定义浮窗样式,并且formatter可...

echarts tooltip 无法正常显示

6 月 9 日
阅读 1 分钟
348
在vue3中,无法正常显示tooltip,根据echarts官网配置项正确配置: {代码...} 未出现tooltip原因:初始化ecahrts的时候用ref保存了echarts实例,实际上应该用shallowRef {代码...}

echarts重复渲染警告

6 月 9 日
阅读 1 分钟
358
系统警告:在 dom 上已经初始化了一个图表实例。初始化的时候可以做一下判断,如果初始化过了就不需要重复初始化实例了 {代码...}

uniapp解决聊天界面IOS系统的界面上顶

6 月 8 日
阅读 2 分钟
379
键盘高度发生变化的时候触发@keyboardheightchange事件,该事件会返回一个键盘高度,我们给view容器设置该键盘的bottom距离,然后再判断键盘是否弹起,弹起后给容器追加设置安全距离来适配苹果机型。
封面图

uniapp横向滚动组件组件-可直接使用

6 月 7 日
阅读 2 分钟
423
这里用到了uv-ui的组件:uv-tabsactiveStyle为激活的tabs样式inactiveStyle为默认tabs样式scrollable是否可滚动
封面图

前端页面单词、网址溢出换行

6 月 6 日
阅读 1 分钟
378
效果:在css中,对文字可以使用:flex-wrap: wrap; 来实现文字溢出换行。但如果文字是英文、网址,该属性则无效。我们需要对英文、网址进行断字,然后使其换行,下面是mdn的解释:

uniapp-vue3-h5请求跨域问题

6 月 4 日
阅读 2 分钟
566
正确配置在根目录新建一个vite.config.js文件 {代码...} 然后通过uniapp.request请求即可,记住baseurl要跟'/api'匹配。错误配置网上很多写法都是错误的,我在这里例举几个:1、在根目录新建vue.config.js文件 {代码...} 在vue3+h5版本无效2、在mainfest.json文件中配置跨域代理 {代码...} 亲测无效,配置后依旧提示404跨域

解决移动端设备hover样式不消失问题

6 月 3 日
阅读 1 分钟
408
下面是一段scss示例: {代码...} 1、使用@media媒体查询,支持hover事件的设备才会生效2、解决焦点和活动状态问题,移动端使用active,PC端使用hover

css元素高度占满余下空间

6 月 2 日
阅读 2 分钟
440
在css中,div的宽度默认独占一行,而高度需要手动设置。上面的布局,box 高度 300box1的高度未知,可能是100,可能是50box2的高度如何占满余下空间?如果box1高度为 100,那么box2高度应该是200,且不会受box2内部元素的高度影响。如果box1高度为100且margin-bottom: 10px,那么box2高度应该为 190px。如果box2上面有n个...

图片的展现方式-缩放模式

5 月 30 日
阅读 1 分钟
366
在移动端的设备中,一般都要求将图片完全展示,且等比缩放。uniapp有几种缩放模式:1、保持纵横比缩放图片,使图片的长边能完全显示出来。2、保持纵横比缩放图片,只保证图片的短边能完全显示出来。3、不保持比例完全铺满4、宽度不变,高度自动变化,保持原图宽高比不变5、高度不变,宽度自动变化,保持原图宽高比不变在...

flex布局的滚动问题

5 月 29 日
阅读 2 分钟
397
{代码...} {代码...} 若flex布局想要某一区域横向滚动,父级一定要加上overflow,hidden或auto都可以。若父级没加overflow,可能会出现溢出的问题: {代码...}

Echarts的容器自适应resize

5 月 27 日
阅读 3 分钟
429
主要是通过Echarts的resize函数来更新图表大小 {代码...} 如果你是一个可视化页面,可能内部有多个图表组件,可以通过驱动组件内事件,来实现批量图表更新 {代码...} 参考:响应容器大小的变化
封面图

uniapp微信小程序版本更新自动提示

5 月 26 日
阅读 2 分钟
394
在app页面的onShow中使用:具体步骤如下:1、获取全局唯一的版本更新管理器对象2、请求新版本信息3、新版本下载,下载完后区分下载完成或下载失败4、下载完成:调用 applyUpdate 应用新版本并重启5、下载失败:提示用户手动更新
封面图

echarts柱状图隔柱换色

5 月 25 日
阅读 5 分钟
492
在series中的itemStyle中定义隔柱换色 {代码...} 各省数据图,完整代码: {代码...}
封面图