- 博客(47)
- 收藏
- 关注
RSS订阅原创 vant-tab 切换不同的tab，页面滚动一致
再次返回第一个界面，会发现第一个界面这个时候也回到了顶部，反正不管怎么切换滑动，每个页面的滚动距离都会收到其他界面的影响，会滑动到相同的距离，vant-tab 切换不同的tab, 假如第一个tab下的界面滑动了一段距离， 点击第二个界面初次加载，最后发现是vant-tab 的所有tab 都使用的是同一个滚动条，就是都是最外面的滚动条。解决方法：每个tab界面使用自己的单独滚动条避免此类问题。
2023-11-03 17:09:57
1414
2
原创 sourceMap: devtool 模式以及SourceMapDevToolPlugin的使用
sourceMap: devtool 模式以及SourceMapDevToolPlugin的使用
2022-11-02 16:25:19
2680
原创 js 鼠标事件总结 mouseover/mouseout 与mouseenter/mouseleave 傻傻分不清楚?
js 鼠标事件总结 mouseover/mouseout 与mouseenter/mouseleave 傻傻分不清楚?
2022-10-14 16:02:06
7141
原创 vue 路由跳转报错 redirected when going from via a navigation guard
vue 路由跳转报错 redirected when going from via a navigation guard
2022-10-14 10:31:22
754
原创 使用element-ui 遇到的问题总结（待续...
el-dialog 单独组件：(前提是没有使用新的字段接收value, 直接使用的是prop 里面的默认值value)如果是在close 里面调用 this.$emit('show', false) 点击关闭按钮会报错, 因为el-dialog 源码里面 在close 的时候 会去调用 下面的方法， 会直接修改el-dialog 单独组件的显示值，prop 值 数据流向是单向的，是导致流向冲突，报错,；会有node 版本不兼容问题 (如果升级了node版本，可能会导致node-sass编译报错);....
2022-08-18 14:38:27
1064
原创 fiddler 抓包显示 ERR_TUNNEL_CONNECTION_FAILED
思考是什么原因导致的？突然想到nginx代理监听的某一个端口号和fidddler里面设置的端口号是一样的，导致冲突了；所以fiddler打开之后，网页访问或者手机上代理也无效了。试用了网上的方法关机重启可以了？但是刚我启动我本地的nginx代理，并且同时打开fiddler的时候突然又不行了？如果你也遇到了这个问题，检查下本地启动的服务端口号和fiddler端口号是否有冲突.昨天用fiddler抓包还是可以的，今天突然不行了？如果对你有帮助，请点个赞吧~~...
2022-07-15 16:46:23
1589
原创 git 相关命令
git 首先是分为4个区工作区（workspace）就是写平时写代码的区域，未add 之前是放在工作区暂存区 临时存放文件改动 add本地仓库区: 提交更改 commit 会生成版本信息 比如commitId ，提交人，提交时间等等远程仓库区：push 到远程仓库一般开发步骤：git clone 地址 ： clone 远程从仓库到本地git add 提交修改到暂存区git commit 提交更改到本地仓库，生成版本信息git pull 拉取最新代码， 如果有冲突 解决
2022-05-26 18:29:07
89
原创 h5无障碍 - 对话框自动聚焦读屏内容
role-alertdialog(可以自动读屏 安卓无效)alertdialog显示时，屏幕阅读器会查找描述文字来报读role-dialog 浏览器会告知屏幕阅读器一个对话框已打开aria-modal="true" 对话框以外的内容 点击的时候 无法被聚焦tabindex="-1" 可以使一个对话框被聚焦 （安卓一定要加aria-label / aria-labelledby 指定读屏阅读器读的内容安卓对话框聚焦：<div v-show="value" class="box.
2022-03-28 14:16:31
1171
原创 生成带有logo的二维码 qrcode.min.js
因为该插件没有附带自动生成logo的二维码，所以我们自己来添加一张<div id="my_qrcode"></div>js 代码：function setQRCode() { var myQrcode = document.getElementById("my_qrcode").innerHTML; if (!myQrcode) { var qrcode = new QRCode(document.getElementById(".
2022-03-15 10:06:11
1043
原创 数组去重 几种方式
let arr = [1, 1, 2, 3, 4, 5, 4]let newArr = arr.filter((item, index) => { return index === arr[item]})1. Set 结构[...new Set(arr)]2. reducearr.reduce((pre, item, index) => { if(!pre.includes(item)) { pre.push(item) }return pre.
2022-03-07 17:01:17
152
原创 手机抓包 fiddler 配置
1. 电脑fidder工具配置（我当前使用的是fidder classic 版本打开fidder-Tools-options 进行如下配置: 点击actions 选择trust root xxx 会下载一个证书 到桌面：点击该证书 选择安装证书 -》 存储位置 当前用户、本地计算机都要安装一遍=》后面自动选择就好端口号可以修改为你想要的到这里fidder配置完成如果想要手机抓包 ，2. 移动端也要进行配置：以苹果...
2022-03-01 15:26:43
1376
原创 节流和防抖
节流：在规定的时间内无论触发多少次事件，在计时结束后都只触发一次（第一次或者最后一次 ）的操作（滚动scroll， resize, 鼠标的mouseover mouseup, mousedown 事件等等）有两种方式：常用的定时器还有时间戳判断； 规定时间是2000毫秒，scroll事件1.定时器方式：当触发事件的时候 先判断当前定时器是否为空, 如果非空 说明上一次的滚动事件定时器回调函数还未执行，就不需要再一次触发定时器; 如果为空，说明上一次的滚动事件中的定时器回调函数在2s内已经执行
2022-02-23 17:04:14
157
原创 文档碎片createDocumentFragment
document.createDocumentFragment()说白了就是为了节约使用DOM。每次JavaScript对DOM的操作都会改变页面的变现，并重新刷新整个页面，从而消耗了大量的时间。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中。利用createDocumentFragment 先把元素拼接起来 最后统一append 到真实的dom元素节点上 let popTitleEl = $('#popTitle') le
2022-02-18 14:59:28
196
原创 浏览器h5拉起app 微信拉起app wx-launch-open-app
浏览器h5拉起app :1) 微信内h5拉起app使用wx-open-launch-app如果未安装 调用2)的实现方法2) 其他浏览器 使用schme 如果未安装跳转到下载界面微信内h5拉起app使用wx-open-launch-app此功能仅开放给已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转满足一定条件的App。开放平台地址登录微信开发者平台：https://open.weixin.qq.com微信网页跳转App功能链接：https://deve.
2022-02-14 17:09:48
9372
7
原创 html2canvas.min.js 截图 多行文字错位 ；截图不全不完整
记录下截图遇到的问题：iOS 系统上 截图生成的海报 文字分享出去之后 文字会错位这个是html2canvas 对中文支持的问题html 文件: <div id="poster"> <div class="content"> <p class="title">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> </div> .
2022-01-24 22:24:49
3714
1
原创 团队中如何提交你的commit； commitizen commitlint
首先看下Angular规范 Commit message 和 Change log 编写指南 - 阮一峰的网络日志1. cz工具集https://github.com/leoforfree/cz-customizable1）cz适配器：commitizen cz-conventional-changelog2） 定制提交规范：cz-customizable.cz-config.js3) 提交校验：commitlint@commitlint/config-convent...
2022-01-18 13:48:28
1207
原创 编码 encodeURIComponent、decodeURIComponent
const credentialJson = JSON.stringify({"authCode": "AQIC5wM2LY4SfczJKnHH4hAh8dLI7E-zkRSJwcuXfn0CnG4"} ) const encredentialJson = encodeURIComponent(credentialJson) const decredentialJson = decodeURIComponent(encredentialJson)不能对对象直接编码 ，不然解码会...
2022-01-11 15:12:47
238
原创 new 一个对象的过程
创建一个空对象让该对象的__proto__指向构造函数的prototype改变构造函数中this的指向，指向该对象最后返回该对象function custNew(fn, ...rest){ const obj = {} obj.__proto__ == fn.prototype fn.apply(obj, ...rest) return obj}...
2021-12-30 14:44:35
122
原创 vue-router 路由方式
浏览器端路由方式有两种: hash 和 history;hash： 改变瞄点(#)后面的值 获取hash 值： location.hash 包括#以及后面的值界面刷新的时候 请求html资源的时候 该值不会向后台发送; 所以如果是这种模式， 不用担心出现丑陋的404界面hash模式 地址栏地址修改时 会触发 hashchange 事件window.onhashchange = function() {}无论什么方式修改，如果只是修改了hash 值，界面地址栏会变化，但是界面不会重
2021-12-29 15:00:53
784
原创 vue 环境配置(多环境配置)
在src 同文件下 依次创建.env 生产环境.env.test 测试环境.env.dev 开发环境里面的配置内容如下使用的时候 就可以用process.env.NODE_ENV 来判断当前环境启动的时候package.json 里面配置 当前启动的环境--model 后加需要启动的环境 名称， 这个名称和上述创建的环境文件名称一致...
2021-12-21 15:25:48
248
原创 Object.defineProperty / proxy
Object.defineProperty作用：用来定义一个对象的属性，并给这个属性赋值 value；可以对对象的属性进行修改 writable（默认不可修改）, 删除 configurable（默认不可删除）， 可枚举enumerable（默认不可枚举）;还有用set、 get 方法赋值取值监听的是对象的单个属性letobj1={}Object.defineProperty(obj1,'propertyName',{value:'name1'...
2021-12-14 14:45:10
702
原创 手写forEach/ 数组常用的处理方法 map filter reduce every some
Array.prototype.toforEach = function(data) { console.log('data====', data) // data 就是调用这个函数传入的参数，此时是一个回调函数; 回调函数不会立马被指向，调用的时候才会执行，如果有形参，如果传对应的实参 console.log('this====', this) // 根据普通函数this指向 谁调用指向谁 所以这个this 指向的是 this.basicList let arra.
2021-12-08 10:37:31
247
原创 vue compute watch
学习参考：计算属性和侦听器 | Vue.jscompute 计算属性 有缓存， 默认get 方法 也可以设置 set方法computed: { newData: { set(val) { console.log('set新数据', val) this.callbacks = val }, get() { console.log('get新数据') return this.callback..
2021-12-08 10:04:25
109
原创 nextTick 源码理解
nexttick 源码：全局定义了一个 callbacks 数组 、timerFunc、pending、isUsingMicroTask接收两个参数： 回调函数 对象1. 如果有回调函数，将回调函数包裹到一个函数中 ; 如果为空 resolve （对象）; 放到callbacks 数组中暴露一个nexttick 方法export function nexttick(cb?:function, cxt?:object) { let _resolvecallbacks.pu...
2021-12-07 14:34:39
171
原创 剩余参数 和 spread参数
三点区分：剩余参数 rest(用于获取函数的多余参数) 和 spread参数(扩展运算符, 好比rest的逆运算):形式都是三点加变量 ...val有时候很迷惑 如何区分： 如果是用在函数形参中 ， 获取的到的是一个数组的集合形式, 无论传多少参数 ，接收的是除了它前面形参的其他参数的集合， 只能放到最后(不然会报错）：这个时候 是剩余参数; 箭头函数可以用这个来代替普通函数中的 argumentsfunction fn(param1,...rest) {console.log('...
2021-12-06 11:18:06
352
原创 es6 解构
解构是es6 的新特性，按照一定的模式，给变量赋值； 不像以前 的那种赋值形式一般经常用到的是数组和对象的解构数组的解构是有序的，按照位置顺序进行解构，如果该位置没有值，则返回undefined;数组结构可以指定默认值对象的解构是无序的，先找到同名属性，然后再找到该属性对应的变量进行赋值； 没有属性名称和变量名称一致， 变量名称可以省略; 如果没有 返回undefined；这说明b 是模式， bv 才是变量对象结构指定默认值：还有一个常用的是函数参数...
2021-12-06 10:11:01
891
原创 js 事件循环 Eventloop
setTimeout(function() { console.log('1')}, 2000)setTimeout(function() { console.log('2')}, 500)let p = new Promise((resolve, reject)=>{ console.log('3') resolve('本身是同步操作，异步返回')})setTimeout(function() { console.log('4'...
2021-12-06 09:42:00
145
原创 继承 面向对象 原型 构造函数
继承是面向对象的一大特征,function gard() { this.age = '100'}function parent(name) { this.name = name this.sex = '女' this.ok = function() {console.log(this.name)}}function child(name){ this.name = name}这样时候 想要child 的实例对象可以访问到parent 和 .
2021-12-02 16:46:09
603
原创 ES6 promise 多连问
注意注意！！！ promise 非常常用，用过ed6的都知道，自己稍微总结下！！从什么是promise,如何创建,如何使用,都有哪些方法，为什么会产生promise,解决了什么问题来说：1. promise 是es6 的新特性， 有三种状态 pending(未完成)/fulfilled(已完成)/rejected(已失败) , 状态只能pending-fufilled/ pending-rejected 一旦确定就不能更改,单向。2. 创建一个promise 使用new 关键字 new Pro.
2021-12-02 11:09:56
669
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人