- 博客(101)
- 收藏
- 关注
RSS订阅原创 工作【当van-tab不满足固定在顶部】
使用sticky实现的。众所周知，在ios上类似固定这种都会有一些问题，比如滑动过程中突然消失不见了。这样可以为该元素添加滚动条，并使Tab内部的列表可以在滚动时进行滑动。固定定位的元素会脱离正常文档流，并相对于最近的具有定位（非static）属性的父元素进行定位。需要H5实现一下滑动列表，顶部tab栏可以切换，当向下滑动列表的时候tab栏固定到顶部。回看下我们的样式，tab是包含list的父元素。本来以为大功告成，但是突然又发现了一个问题，页面不能滑动了。因为固定定位的父元素导致了滚动行为的限制。
2023-09-22 17:04:36
857
原创 【工作】-处理快速切换 Tab 导致列表数据不正确的情况
取消之前的请求：在切换到新的 Tab 之前，首先检查是否有之前的请求正在进行中。如果是，可以使用取消请求的机制中止之前的请求，以确保不会更新当前 Tab 的数据。缓存请求结果：你可以在切换 Tab 时，将已获取的数据缓存起来，以避免重复请求相同的数据。当切换回之前已经获取过的 Tab 时，直接从缓存中获取数据进行展示，而不发起新的请求。防止并发请求：为了避免并发请求导致数据不正确，你可以在发起新请求之前添加一个标记来检查是否已有请求正在进行中。如果有，则不发起新请求，或者等待之前的请求完成后再发起新请求。
2023-09-22 10:32:44
794
原创 【es6】Promise实现
如果任意的 promise reject，则 Promise.all 整个将会 reject。当我们需要 所有 结果都成功时，它对这种“全有或全无”的情况很有用：Promise.allSettled 等待所有的 promise 都被 settle，无论结果如何。race比赛竞赛的意思，也就是谁跑的快就返回谁，不管你是成功还是失败。跟all方法比较相似，但更简单一些。本篇文章只是介绍实现promise以及promise常用方法。
2023-08-02 14:18:50
640
原创 【工作】vant的search组件手动聚焦
也不能太过于依赖文档，最好还是看下源码有没有封装对应的方法供外部调用既然没有提供，我们就找到最基本的input，调用它的方法如果手动聚焦，记住input原生永远可以提供给你focus方法。哈哈，别灰心～
2023-08-02 10:58:51
854
原创 【工作】Promise.all处理多个请求
Promise.all是一个用于处理多个Promise实例的方法，它接收一个Promise数组作为参数，并返回一个新的Promise实例，用于等待所有的Promise实例都完成。当所有的Promise实例都成功完成时，返回的Promise实例才会变成fulfilled状态，同时将所有的结果以数组的形式传递给then方法；当其中任意一个Promise实例失败或出现错误时，返回的Promise实例会变成rejected状态，并将第一个失败或错误的Promise实例的结果传递给catch方法。
2023-05-08 14:41:42
2287
原创 【工作】-其他人访问本地项目
同个前端模块并行多个需求同节点进行联调时、介入测试阶段前端测试环境只有一套时。因前端环境冲突问题，导致大量堆积。5.其他电脑访问localhost.kgtest.cn，成功访问到前端本地所启动的项目以及对应打到的环境中。可以先在对方电脑上，ping一下自己的ip地址，看是否能通过。3.本地和对方配置Host，这里推荐SwitchHosts，比较方便。1.涉及到登录态相关解决办法：（需前端和需要访问的同学配合）1.配置VUE启动服务的Host。针对可以本地拿到登录态的项目。
2023-05-04 11:06:24
530
原创 【工作】keep-alive+van-list 实现滑动位置保留
这样实现是不是好多了呢？不需要考虑ios和安卓差异性的问题。不需要考虑这个页面需要缓存滑动，再次实现滑动的问题。也不需要考虑数据没返回之后，滑动失败的问题。欢迎大家一起交流～～
2023-02-07 14:57:00
753
原创 【工作】vue对比数据差异展示
调研了很多比对的插件，由于我们的数据是动态的且有一些业务逻辑存在，所以最后采用的是html-diff这个依赖。对应的链接为【html-diff提示：以下是我的解决办法，欢迎大家积极留言交流更好的解决方案以上就是今天要分享的内容啦，本文仅仅简单介绍了html-diff的使用从而解决实现比对的业务场景，如果大家对于以上场景有更好的实现方式，欢迎大家积极评论一起交流呀～～～
2023-02-02 17:25:16
2631
2
原创 【工作】van-list 分页查询数据切换页面后滑动位置保留
因为会多个请求，考虑可以一个请求，把分页参数pageSize修改为需要请求的数量。目前这样分页请求，会出现滑动停顿滑动停顿的反复，虽然loading展示，但是也可以看到这么一个交互。应用场景为从A页面点击到B页面，B页面操作后自动回到A页面，A页面滑动位置保留且对应项数据更新。2.在返回到A页面时，scroll有值，展示loading（要不然页面自己搜搜往下滑好奇怪）3.监听滑动，如果滑动高度curScroll与scroll相同，loading隐藏。数据是分页请求的，页面滑动也需要基于所有数据都拿到后。
2023-01-30 10:44:30
1059
原创 工作-safari时间格式
在执行new Date( string ) 的时候，不同浏览器会采用不同的parse，目前chrome两种格式都支持，而Safari只支持yyyy/mm/dd。
2022-09-05 14:53:31
566
原创 笔记-编程命名法
匈牙利命名法匈牙利应用命名法不表示实际数据类型，而是给出了变量目的的提示，或者说它代表了什么：CamelCase、PascalCaseCamel-Case、CamelCase、camel case第一个单字以小写字母开始；第二个单字的首字母大写，例如：firstName、lastName。每一个单字的首字母都采用大写字母，例如：FirstName、LastName、CamelCase，也被称为PascalCase命名法（帕斯卡命名法）蛇形命名法（snake_case）是指每个空格皆以底线（_）取代的书
2022-07-12 11:45:14
964
原创 笔记-typeScript高级类型
他会将一个类型的所有属性值都映射到另一个类型上并创造一个新的类型。在这里，它期望数字作为类型，属性值的类型是EmployeeType，因此具有id，fullname和role字段的对象。会将K中的所有属性值都转换为T类型，并将返回的新类型返回给proxyType，K可以是联合类型、对象、枚举…也可以自己在第一个参数后追加额外的值，如下面:...
2022-07-12 11:13:11
145
原创 工作-数字字符串进行比较
这样一个场景，如果A收入的钱比B收入的钱少，那么就应该有一个友情提示，告知用户A收入的钱比B收入的钱少。最近测试童鞋反馈了一个问题，她那笔订单A返回的金额是15.00，B返回的8.00，但是我那个提示竟然非常突出的展示在了页面上。（当时我的表情如下：）这时候第一反应，让我直接拿着两个数字在控制台输出下。哦莫莫，我真的会栓Q。。一顿搜索之后，终于知道为什么了。像这种数字型字符串进行比较的话，这种比较为ASCII码比较，依次取每个字符，字符转为ASCII码进行比较，ASCII码先大的即为大，这时候就不
2022-06-21 15:12:07
482
原创 规范-适当的规范
最近看了一些提交规范的文档，想起来在上家公司的时候，是有用到cz来进行提交规范，但是当时并没有细研究这个玩意。今天来板板废话文学文章的毛病，采用SCQA工具来进行本篇文章的输出。一个项目往往都不是只有一个FE来进行维护的，通常是多个FE来进行维护。通常我们的流程都是本地开发自测，提交代码，提测。时间久了，越来越多的提交，这时候我们打开历史的commit，oh，no！可以知道改动了，可以知道提交代码了，但是改动了什么呢？本次改动影响大不大呢？等等，带着一系列的问题。这个时候，会不会特别的头大。贴张图来对
2022-06-18 14:20:03
134
原创 工作-iview的Tooltip+render函数
最近需要实现一个列表中一项展示部分文案，鼠标移动到该文案上，在左边悬浮提示框。比如iview组件内这种效果：因为使用的是render来进行渲染列表的，所以就需要在render中渲染Tooltip。
2022-06-08 16:45:59
735
原创 【NEW】抓包工具-ProxyMan
背景总会有一些移动端需要我们排查问题、调试的场景。之前一直用charles，或者通过在测试环境的debuger的依赖vconsole来看，好久之前下载了一个proxyman抓包工具，今天搞明白这玩意咋用了，真香哈哈哈哈，好用多了。安装证书因为也是为了移动端场景所使用的，PC的基本不会通过抓包来看，所以就直接说移动端抓包如何使用呢iOS我这里是iOS测试机，所以我就以iOS为例吧。选择对应的证书查看ip和端口信息根据提示的步骤操作以及查看ip以及端口信息手机设置代理这里我就不多说了，大
2022-05-23 20:06:38
2803
2
原创 【组件库构建】知识储备----版本规范
semver版本规范semVer版本规范whywhathowsemVer版本规范why以下摘录自官网这并不是一个新的或者革命性的想法。实际上，你可能已经在做一些近似的事情了。问题在于只是“近似”还不够。如果没有某个正式的规范可循，版本号对于依赖的管理并无实质意义。将上述的想法命名并给予清楚的定义，让你对软件使用者传达意向变得容易。一旦这些意向变得清楚，弹性（但又不会太弹性）的依赖规范就能达成。举个简单的例子就可以展示语义化的版本控制如何让依赖地狱成为过去。假设有个名为“救火车”的函数库，它需要
2022-04-29 18:03:55
608
原创 工作-一个依赖依赖的依赖导致的血案
背景（S）最近了解到一种写文档总结很好的公式，虽然说这个貌似是用在写简历上的，哈哈哈哈哈，但是我觉得万物皆可套嘛。我的文档也要越来越正规这样才有意义嘛～今天遇到了一个之前没有遇到的问题。简而言之，本地运行编译溜的一匹，很好提测部署，在部署平台上提测，等呀等，失败。。第一反应，是不是部署平台的问题，在点击一下，重新提测部署下，等呀等，失败。。what？（此处是一个外国友人撅嘴what的表情包，自行想象）任务（T）这不行啊，要今天上线的，得赶紧处理下提测失败！！行动（A）查看了下失败日志，说
2022-04-02 18:45:29
238
原创 工作-根据base64或者url获取图片字节大小
背景在上传图片时，发现如果图片过大，传给后端时会出现数据丢失的情况。如果统一压缩处理，又会出现原本很小的文件再次压缩导致图片严重失真。结合诸多背景，就需要在根据网络url或者base64拿到图片大小。再根据大小考虑是否需要压缩。参考一些文章，总结以下几种拿到图片大小的方式，方便后续自己使用：通过请求的content-length通过访问这个网络资源通过base64的长度通过生成img之后在load方法拿到size下面挨个说下这几种方法：1、通过请求的content-lengthva
2022-03-22 21:10:28
1722
原创 工作-相册上传&相机上传
背景今天开发遇到了一个非常奇怪的问题，前端逻辑相同，后端接口也是同一个。但是这时候奇怪的事情发生了（搬好小板凳，不清楚缘由会觉得很玄学）相机上传非常速度，非常正常相册上传非常缓慢，接口失败率90%这时候第一反应：原生的问题（哈哈哈，对不起）排查：打印原生回调的base64，拿到了。这时候第二反应：服务端的问题排查：同样的接口，只有相册不行，服务端也没做其他处理咦，奇了怪了，抓包，我不信我参数没传过去抓包，对了吧，服务端的问题，我穿过去了。这时候找来后端小伙伴帮忙一起查看这个问
2022-03-17 20:23:00
237
原创 工作-vue+@amap/amap-jsapi-loader
背景：最近又遇到了地图相关的东西，还额外了解到定位原来分好几种呀，真是涨知识呢，后续会对这个定位再额外出个小记录。因为之前对地图这里不熟悉呀，每一个新场景，导致我都需要提前了解一波，所以又来记录一番，方便后续使用，hhh。实现效果下面就是引入此依赖的各种代码了，仅供参考。（除此之外，如果对定位的位置不是要求特别精准的话，可以使用h5自带的定位，但是如果对定位要求比较精准的话，还是建议大家用高德的呦，具体差别，大家试一下就知道了，确实是非常大）在要展示地图的页面引入在重新绘制地图之前要把之
2022-03-16 18:17:38
558
原创 「工作」-vue组件监听props监听不到
背景最近在实现一个功能的时候发现，在一个vue页面中组件的部分一直不能展示，看了看代码，展示条件也符合啊，为何展示不出来呢？在仔细看了下逻辑，发现组件只有在接收props中的值发生改变的时候，才会执行下面的逻辑，才会展示内容。代码// 父页面<div class="nav"> <div class="nav-item" :class="{'active':type=='scatter'}" @click="onTabClick('scatter')"
2021-12-01 18:50:41
1180
原创 工作-iview render Input输入一个字符自动跳出焦点
背景有一个场景，需要在表格中渲染输入框。这简单，但是，当我美美的欣赏的时候发现了一个问题。嗯，我输入一个字符后，就失去焦点了！这是why？删除一个就失去焦点了！代码const desc = h('span', { style: { margin: '0 10px' },}, "至");const maxDistance = h('Input', { props: { type:'text', value: params.row.maxDistan
2021-12-01 18:32:28
792
原创 工作-uniapp加载服务端返回的index.html以及token携带问题
背景最近在用uniapp重构我们的项目，因为原本的app中内嵌了非常多的H5页面，更严谨的说是app内嵌着weex页面，weex嵌套着H5页面，复杂程度可想而知。uniapp这个一套代码，多端使用的优点真的是非常打动人，再也不需要搬来搬去，这感觉别说有多爽，但是随着不断开发，也会遇到一些各种各样的问题。项目中H5页面都是通过后端接口返回的（因为还没有彻底分离导致），在uniapp中直接把webview的url赋值上接口以及对应的目录就会有一个问题，接口会返回token错误❌。。解决通过不断搜索查询可
2021-09-23 15:11:02
1490
原创 工作-vue动态修改标题
背景最近做了好多事情，没时间整理，最近还是要每天固定整理一波新接触的东西，不断沉淀。今天就简单整理一下动态修改标题。VUE是一个单页面，一般我们都会在index.html中去修改我们要展示的标题。比如下面：但是如果在同一个项目下，不同的页面，我想要展示不同的标题应该怎么处理呢？解决搜索了一番，找到了以下一些办法。1、document.title=“xxx”这也是我本次采取的办法。（看好多博客说这个比较笨，但是我个人觉得还行啊） created () { document.title
2021-09-23 14:45:04
540
原创 工作-页面滑动到一定高度吸顶
背景在页面中间有一个固定的tab栏，当页面滑动到tab栏到达页面顶部的时候，tab栏吸顶。点击tab页面滑动到指定元素的位置。代码 <div class="tab"> <div ref="serviceTab" :class="serviceTabActive ? 'tab_title tab_after' : 'tab_title'" @click="goToServiceTab" > 服
2021-07-29 19:39:44
138
原创 工作-react组件通信
背景公司一个项目是用react去写的，之前也没有接触过react，所以对通信这里也不熟悉，借此机会，整理下这里，供以后参考。PS：看博客觉得这句话说的特别通俗易懂核心:谁的数据 数据的修改方式就谁里面定义 别人只能调用 需要处理的 把声明好的方法传过去父传子通信：通过props去接受。子传父通信情景 子控制父弹窗// 在父页面{ this.orderData && this.orderData.orderid && ( <Ord
2021-07-14 14:59:26
62
原创 工作-vue的keep-alive实现缓存
背景最近做的需求有一个场景，在登录页面有一个协议，用户点击这个协议会跳转到另一个页面查看当前协议，此时就有一个问题，当用户跳转到协议页面查看协议的时候，在返回登录页面，页面重新刷新了，之前填写的信息就不存在了。解决办法keep-alive有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。官方文档代码示例// App.vue<keep-alive> <
2021-07-08 10:53:39
134
原创 工作-版本号校验
背景最近排查一个bug，安卓手机一个按钮不展示，但是ios手机没有影响。经过排查代码才发现，这个按钮展示是根据后端返回的字段以及一个版本号来进行判断的。同一个账号，在安卓手机和ios手机返回的字段不一样这显然是不现实的，所以很显然，是由于版本号导致的这个错误。在看了一下逻辑，原来当时是在某个版本之后，才有这个按钮，所以有一个版本判断。现在中间已经差了起码5个大版本，可以说最基础的版本覆盖率肯定100%了。现在进入正题吧观察如下：具体为啥第二个会为false，我猜测是因为隐式转换的时候，3.10.1
2021-07-01 16:30:03
248
原创 工作-vue路由
记录一些日常工作中遇到的vue路由相关，积累。vue跳转打开新窗口const routeData = this.$router.resolve({ name: 'OrderDetail', query: { orderId: this.idStr, },});window['open'](routeData.href, '_blank');...
2021-06-22 16:10:03
54
原创 工作-H5活动页唤起APP
背景最近做了一个618活动页，当用户点击图片的时候，如果本地有APP，唤起本地APP；若没有，则跳转到app store下载。参考了很多文档，因为安卓和苹果以及各个浏览器还是有很大区别的。针对此次情景总结如下：安卓&iOS采用的是通过一段时间内，监听当前页面是否隐藏，如果隐藏了，就说明跳转成功了。PS：因为没有现成的API可以知道是否用户本地有APP，大家有什么好办法，欢迎说出来～～～// 点击图片唤起APP poster.onclick = function () {
2021-06-15 14:05:00
197
原创 工作-cookie信息请求没有携带
背景做了一个618活动的需求，因为原本这个页面是在服务器上直接运行的，所以这次顺便把它整理到我们专属静态页面的项目下面。但是出现了一个问题，就是在发起一个请求的时候，cookie信息没有携带过去。打印页面的window.location.href会发现都有拼接上一些token等信息。解决办法因为原本是通过后端一个接口返回前端静态页面的方式来实现的，所以也不存在跨域以及cookie信息携带不上的问题，但是这次是直接前端页面访问后端接口，所以需要xhr.withCredentials = true;来允
2021-06-08 15:44:36
721
原创 工作-VUE+vue-amap
背景根据VUE+vue-amap实现定位、搜索定位、移动地图反向搜索位置。因为以前也没接触过高德地图这里，所以趁着这次机会也整理下高德相关这部分。避免后续遇到啥也不晓得～主要其实是这两部分：// 首先是在main.js中引入需要用到的高德插件import AMap from 'vue-amap';AMap.initAMapApiLoader({ key: '高德的key', // 插件集合 plugin: ['AMap.Autocomplete', 'AMap.Pl
2021-06-02 14:21:37
235
2
原创 工作-触底刷新
背景刚刚做了一个需求，其中一个小功能是H5页面触底刷新的功能，因为直接接触小程序最多，直接用小程序API简直不要太好用，所以冷不丁不知道该去如何实现这个功能，一顿百度+翻一些成熟组件库，最后还是不知如何实现????。但是我不能放弃啊！！！（毕竟只有我自己一个前端，我觉得这个机会也很好，俗话说靠人不如靠自己！！）仅凭着稀有的记忆，费劲吧啦想起一些关于当前可视区高度等等。最后跋山涉水可算实现了这个功能，借此机会，趁热乎，来整理下这里的相关知识点。PS：以我现在的认知，我觉得一般都是借用这两种加载方式来实
2021-05-27 18:49:04
286
原创 VUE-毫无关系的组件之间通信
**背景：**比如想要实现这样一个效果，当点击侧边菜单的时候，在顶部导航栏展示侧边菜单被选中的菜单名。侧边菜单和顶部导航分别是两个组件。两个毫无关系的组件。实现：eventBus- 发布订阅模式写一个eventBus.js文件import Vue from 'vue';export default new Vue();在需要通信的组件中分别引入这个文件// navimport eventBus from '@utils/eventBus';// menuimport even
2021-05-08 18:14:52
1408
1
原创 CSS-overflow-y属性
参考文档：MDN「overflow-y」W3C「overflow-y」背景：最近在重构一个比较旧的项目，码着码着，发现了一个小问题。比如这样一个结构：导航栏和菜单栏都是固定不动的，当main盒子中内容当前屏幕放不下的时候，就会滑动来看下面的内容。这是一个最普通的场景了吧，但是你滑滑发现，有两个滚动条，main一个滚动条，最外面还有一个滚动条。。一顿查询知道了这个属性overflow-y。正如MDN所说，这个属性就是用来决定如何处理溢出的内容。hidden属性，就是来控制不展示滚动条哒～
2021-05-08 18:03:54
231
原创 笔记-Prettier格式化代码
Prettier官方文档Prettier是一个自定义的代码格式化工具，它支持以下文件格式：JavaScript，including ES2017JSXAngularVueFlowTypescriptCSS，Less and SCSSHTMLJSONGraphQLMarkdown，including GFM and MDXYAML安装yarnyarn add prettier --dev --exact## or globallyyarn global add pr
2021-05-07 18:40:37
221
原创 JS-判断对象是否为空对象
1、将json对象转化为json字符串，再判断该字符串是否为"{}"var data = {};var b = (JSON.stringify(data) == "{}");console.log(b); // true2、for in循环判断var obj = {};var b = function() { for(var key in obj) { return false; } return true;}console.log(b()); // true3、jQuer
2021-04-28 10:34:36
71
原创 工作-Vue的v-model的几种修饰符
补充一些以前没怎么注意，在工作中接触到的小知识点。.lazy并不是实时改变，而是在失去焦点或者按回车时才会更新。.number将输入转换成Number类型。.trim可以自动过滤输入首尾的空格。
2021-04-26 14:17:30
132
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人