_web_Z的博客

H5页面safari浏览器底部遮挡问题解决方案亲测有效

解决方案：最外层父盒子假如叫A添加 background为border-image的值，以及添加 boder-radius。关于border-image和border-radius一起使用border-radius不起作用。再添加一层父盒子假如叫B 添加padding值为border的宽度。最外层父盒子的border-radius设置稍大一点效果会更好！最终表现效果是 .tab_box设置的border-radius。C和D都是子盒子 单独设置其border-radius。

小程序自定义步骤条实现，支持背景颜色自定义，喜欢的朋友拿走不谢

自从HTML5提供了video标签，在网页中播放视频已经变成一个非常简单的事，只要一个video标签，src属性设置为视频的地址就完事了。由于src指向真实的视频网络地址，在早期一般网站资源文件不怎么通过referer设置防盗链，当我们拿到视频的地址后可以随意的下载或使用（每次放假回家，就会有亲戚找我帮忙从一些视频网站上下东西）。Tips：目前的云存储服务商大部分都支持referer防盗链。

android在软键盘弹起或收起时，会改变window的高度，因此监听window的onresize事件；（1）、在ios中软键盘弹起时，仅会引起body的scrollTop值改变，可以通过输入框的获取焦点情况来做判断。⚠️ ios系统弹起软键盘时，固定定位失效，这是所有ios系统的一个bug，出现此问题时就利用上面监听输入框获取焦点和失去焦点的方法改变样式。html 或者body添加 {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);//兼容firebox。

因为hook先执行return中的dom渲染，if判断时全都是初始状态的值，如果这些值是异步获取的，并且useEffect中的代码触发时机是Dom渲染后，从而导致错误。hook书写 return的dom结构不要被if语句判断包裹 除非判断的值不是异步状态获取的 如图。tab切换时，跳转最好replace路由，提高用户返回时的用户体验～

接口错误异常 统一在 axios封装中 拦截器中使用 .catch 中捕获js异常使用window.addEventListene(‘error’,(error) => {},true);第三个参数表示是否捕获阶段执行，开启捕获不仅可以获取到js的异常，还可以获取到资源加载的异常（如图片加载失败）未处理的 Promise 异常// 打印异常原因// 阻止控制台打印});

script:- node -v- npm -vcache:paths:job build:script:cache:paths:artifacts:paths:- build/

瀑布流移动端丝滑体验React。

electorn读取本地视频资源

React中添加防抖。

npm i lib-flexible --savenpm install postcss-pxtorem@5.1.1//px转化成rem得配置然后在找到根目录下得.postcssrc.js2. postcss-px-to-viewport 推荐在项目根目录下添加.postcssrc.js文件

我曾经一度很迷茫，在学了 Vue、React 的实战开发和应用以后，好像遇到了一些瓶颈，不知道该怎样继续深入下去。相信这也是很多一两年经验的前端工程师所遇到共同问题，这篇文章，笔者想结合自己的一些成长经历整理出一些路线，帮助各位初中级前端工程师少走一些弯路。这篇文章会提到非常非常多的学习路线和链接，如果你还在初中级的阶段，不必太焦虑，可以把这篇文章作为一个进阶的路线图，在未来的时日里朝着这个方向努力就好。我也并不是说这篇文章是进阶高级工程师的唯一一条路线，如果你在业务上做的精进，亦或是能在沟通上八面玲珑

系统皮肤通过提前定义好各种皮肤风格通过vue的store以及localStorage去动态修改同时代码中要使用变量方式引入store中的主题颜色

闲来无事，搞了搞Echarts，效果如下，可做毕业设计。使用的网易云提供的疫情数据接口，Koa2搭建的服务器，在线演示地址 https://www.myutils.cn/#/bigscreen可自适应各种移动端，Paid端，PC端。

解决方案 ： 添加 preview-teleported 属性即可

校园服务类小程序需要哪些功能能火

安装dockeryum -y install docker启动docker服务:sudo systemctl start docker开机自启动dockersudo systemctl enable docker使用docker version 命令查看docker是否安装成功安装gitlabsudo docker run --detach \ --hostname gitlab.myutils.cn \ --publish 8443:443 --...

踩了一天的坑，终于把这该死的自定义custom-tab-bar啃下来了，代码如下<cover-image class="background-bottom {{isIphoneX?'phone':''}}" src="/image/tab/tab_bgc.png"></cover-image><cover-view wx:if="{{isIphoneX}}" class="tab-bar-backgrond"></cover-view> <

1. vue2.x的响应式实现和vue3.x的响应式实现2.diff算法实现原理3.AST抽象语法树实现原理4.webpack实现原理5.常见的loader和plugin以及loader和plugin的区别6.前端性能优化7.前端安全问题8.前端长列表优化9.浏览器缓存10.浏览器从输入url按下回车都经历了什么11.css样式垂直居中12.TCP三握四挥13.new关键字都做了什么14.两个异步任务如何比较快慢15.Promise16.vue3新

因为 this.setData 是异步的所以 input输入后 bindblur 去重新赋值 这个过程中 会出现bugbindblur 的优先级太低了且setData是异步的 这个时候点击确认按钮 打印 input框内的值会发现 是之前的值解决方案1. 不要用bindblur 使用bindinput解决方案2. 确认按钮添加 setTimeout 防止确认的动作比离do焦的快动作...

/* 用于解决wangeditor的层级过高 .w-e-toolbar 要比 .w-e-text-container 的 z-index大 否则工具栏不会展示了 */.w-e-text-container { z-index: 1 !important;}.w-e-menu { z-index: 2 !important;}.w-e-toolbar{ z-index: 2 !important;}...

console.log( [] == ![] ) // trueconsole.log( {} == !{} ) // false在比较字符串、数值和布尔值的相等性时，问题还比较简单。但在涉及到对象的比较时，问题就变得复杂了。最早的ECMAScript中的相等和不相等操作符会在执行比较之前，先将对象转换成相似的类型。后来，有人提出了这种转换到底是否合理的质疑。最后，ECMAScript的解决方案就是提供两组操作符：相等和不相等——先转换再比较 （==）全等和不全等——仅比较而不转换

pasteTextHandle 利用的是自定义处理粘贴的文本内容// 自定义处理粘贴的文本内容 pasteTextHandle(content) { let n = new Date().getTime() let imageArr = [] // //匹配图片 var imgReg = /<img.*?(?:>|\/>)/gi; // //匹配src属性

一开始 用的是 window.open() 方法弃用的原因想必大家都知道 就是体感很差 浏览器会拦截住后来选择了使用iframe 相比 window,open() 方法 稍强一些this.picData.forEach(item=>{ if(item.isChecked){ const iframe = document.createElement("iframe"); iframe.style.display = "none"; iframe.style.heig

一开始 用的是 window.open() 方法弃用的原因想必大家都知道 就是体感很差 浏览器会拦截住后来选择了使用iframe 相比 window,open() 方法 稍强一些this.picData.forEach(item=>{ if(item.isChecked){ const iframe = document.createElement("iframe"); iframe.style.display = "none"; iframe.style.heig

HTTP header 有哪些字段&HTTP 的方法有哪些方法Http中存在多个字段可实现Http功能的扩展，也就是之前所提到的易于扩展特性。数据类型与编码类型字段客户端和服务器常常需要协商返回的数据。客户端发送请求时需告知服务器所需返回的文件类型，服务端需告知浏览器实际返回的数据是什么类型。同样，他们之间也需协商数据的编码类型。常见数据类型（MIME type）text文本类型数据，具体包括纯文本文档（text/plain）、超文本文档（text/html）和样式文档（text/cs

浏览器缓存策略

答：宏任务先执行然后再执行微任务。因为script是一个大的宏任务！首先你需要了解任务分类，在js中任务分为同步任务和异步任务，为什么这么搞？因为js是单线程的，为什么是单线程的？因为js设计之初是为了解决页面交互的，一种脚本没必要那么复杂，其次如果js设计成多线程的，会有很大的问题，多线程要考虑线程之间的资源抢占，死锁，冲突之类的，加入你在操作一个dom节点把它改成了红色，然后另一个线程把它删除掉了，这时你就会完全懵掉。什么是宏任务，什么是微任务？微任务设计的目的简单讲就是为了插队！微任务在宏任务

/bin/zsh -c “$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)”

节流：函数在一段时间内的多次调用，仅第一次有效。节流就像是一个看门大爷，每一段时间它只会放一个人进去时间戳版function throttle(func, delay) { var last = 0; return function () { var now = Date.now(); if (now >= delay + last) { func.apply(this, arguments);

浏览器采用es module imports 关键的变化是index.html 中 main.js的引入方式vite采用http请求的方式 递归请求 vue文件，转换成浏览器认识的javascript文件（注意不再是vue文件）预编译（预打包） 将请求到的文件递归方式预编译，采用相对路径方式加载node_modules中当前插件(比如vue)下的package.json中的module，这个地址代表打包js文件地址，浏览器需要加载这个地址。然后 ctx.body = rewrite..

shaco-page启动vue create-vite-app [projectName]安装所需要的的插件配置eslint 过程艰辛 后来在官网 eslint官网找到了命令 ./node_modules/.bin/eslint --initmodule.exports = { env: { browser: true, es2021: true }, extends: [ 'plugin:vue/essential', 'standard' .

关于 reactive响应式数据赋值问题const list = reactive({})当你接收到接口数据，不要直接赋值 比如 list = data这样会丢失响应式！你可以这样做： const list = reactive({ arr:[]})list.arr = data.arr或者将list声明为ref方式const list = ref([])list.value = data这样也不会丢失响应式原因：reactive声明的响应式对象被list代理 操

结点的度：当前节点的子结点的个数树的度：该树最大结点数叶子结点：没有后代的结点分支结点：有后代的结点（跟结点又叫做开始结点，其他结点叫做内部结点）双亲表示法 ： 数组孩子表示法 : 数组+链表孩子兄弟表示法二叉树：每个结点至多有两个子结点，这样的树叫做二叉树二叉树中不存在度大于二的结点左子树和右子树顺序不能颠倒即使某个结点存在一个子结点也要区分是左子树还是右子树第n层最多有 2^（n-1）个结点深度为n最多 2^n - 1 个结点...

文案进入到柱状图中解决办法plotOptions:{ column:{ dataLabels: { crop:false, overflow: 'none' } }}或者

在任何情况下，DOMContentLoaded 的触发不需要等待图片，音频，视频等其他资源加载完成。其次，说说loadload，网页上所有资源（图片，音频，视频等）被加载后才会触发load事件。页面的load事件会在DOMContentLoaded被触发之后才触发。函数的参数传递中是按值传递！ （如果参数是引用类型，并不会修改其指向！！！注意！！！）常见AscII码值获取AscII码值以及转换成AscII码a.charCodeAt()String.fromCharCode(b..

记录今天开发中遇到的一个问题，接口请求到数据后，为每一条数据添加flag，用来控制编辑时显示input框，使用this.$set()方法的时候 数据已经更新但是 页面未响应解决方案this.$set(arr[index],'flag',true)this.$forceUpdate() //强制渲染...

开发中只适用于调试！ 不要用于线上环境，否则会有大问题！详情查看 传送门