交互

先上代码，看完你就懂了 做前端这些年，最烦的不是写样式，是那种“看着简单，一做就崩”的交互。比如列表排序——用户拖一下就能重新排，看起来不就是个 drag & drop？可真动手的时候，你会发...

优化前：卡得不行 项目里用 Hammer.js 做了个横向滑动的卡片流，本以为几行代码的事儿，结果上线后用户反馈“一滑就卡”“页面直接不动了”。我自己拿 Android 低端机试了下，touchmov...

项目初期的技术选型 这项目是个在线设计工具，用户要能在画布上圈出特定区域做标注。一开始我寻思着用现成的库，比如 Fabric.js 或 Konva.js，功能是全，但引入整个库就为了个区域绘制？感觉有...

我的写法，亲测靠谱 最近三个项目都在用腾讯云COS传文件，前端这块我基本固定了一套流程。先说结论：别直接在前端生成签名，也别把SecretKey扔进代码里，真有人这么干，我见过生产环境挂着Secret...

项目初期的技术选型 这个功能是做在线预约系统的排队显示，用户提交预约后会进入一个队列，前端需要实时展示当前排到多少人、前面还有多少人。本来是个简单需求，但客户非要加个“动态流动”的视觉效果——不是单纯...

又踩坑了，滚动到一半卡住不动 项目里用虚拟列表展示几千条数据，本来挺顺的，结果测试一拉到底就发现不对劲：滚到中间某处突然卡住，怎么划都不动。最离谱的是，手指还在滑，但列表就是不跟着走，像被冻住了。 第...

先看效果，再看代码 我最近在一个品牌官网上做了个视差滚动的首页，客户说“要那种看起来贵一点的动效”。其实说白了就是要点视觉层次感。最后我用纯 CSS + 一点点 JavaScript 搞定了基础视差，...

优化前：卡得不行 上周上线了个新功能，用户反馈说点按钮后页面会“卡一下”，有时候Toast弹出来半天才消失，甚至连续点几次直接把浏览器搞崩了。我自己试了下，确实离谱——在低端安卓机上，连续触发5次To...

我的写法，亲测靠谱 我用 Final Form 已经三年多了，从 React 16 那会儿就开始用，一直到现在 React 18 也没换过表单库。不是说它完美，而是它够轻、够灵活、类型支持也还行。但坑...

又踩坑了，Upload组件传参死活不生效 今天上线前最后联调，发现一个低级到离谱的问题：我用的Upload组件，明明在data里写了token，但发请求的时候header里就是没有Authorizat...

预览模式搞了这么多年，我到底在选什么？ 说实话，做预览模式这事，我已经做过不下五遍了。后台编辑内容，点一下“预览”，页面就变成用户看到的样子——看似简单，实现起来坑多得要命。最近又接了个新项目，又要搞...

又踩坑了，touchmove滚动失效 搞了个拖拽网格布局，PC端好好的，手指一碰手机屏幕——页面卡死，根本没法滚动。这谁顶得住？我以为加个 touch-action: manipulation 就完事...

为啥我要折腾 ApexCharts 的几种用法？ 上个月接了个数据看板的活儿，客户要一堆动态图表，柱状图、折线图、饼图轮着来，还得支持响应式和导出图片。我第一反应就是上 ApexCharts —— 轻...

优化前：卡得不行 最近做了一个商品列表页面，本来以为很简单的需求，结果上线后发现滚动卡得要死。用户滑动几下屏幕就开始掉帧，FPS直接掉到个位数，那种卡顿感简直让人想砸手机。Chrome DevTool...

核心代码就这几行 先说个实在话，滚动加载这玩意儿看着挺复杂，其实核心就那么几行代码。我之前也觉得这是什么高深技术，折腾半天发现，就是监听个滚动事件，判断是否触底就完事了。 这里直接上最基础的实现： f...

为什么要做这次对比？ 最近做项目遇到动画需求，Lottie确实香，但不是所有场景都适合。我发现很多人只知道Lottie，其实还有其他方案。今天就把几个主流方案拿出来遛遛，看看各自的优劣势。我比较喜欢实...

这个项目为什么要用Three.js 最近做了个产品展示页面，客户要求做那种3D的产品展示，能旋转、缩放、点击热点查看详情。本来想用CSS 3D Transform凑合一下，但想想还是太假了，交互也不够...

Canvas橡皮擦又把我整懵了 前两天搞个在线画板功能，本来以为橡皮擦就是个简单的事儿，结果被折磨得够呛。一开始想着用globalCompositeOperation搞个source-atop，结果发...

我的写法，亲测靠谱 快捷键提示这玩意儿，看起来简单，实际上坑不少。我一般这样处理：先搞个全局的键盘事件监听，然后把所有快捷键配置集中管理，最后用一个轻量级的UI组件来显示提示。 先看核心代码： // ...

TouchEnd事件处理的那些坑 昨天遇到一个奇怪的问题，移动端的点击效果怎么都触发不了，折腾了半天发现原来是touchend事件被preventDefault给阻止了。这里我把整个踩坑过程记录一下，...