交互

先上核心代码，能跑再说 上周做项目要支持上传 2GB 的视频文件，用户直接拖个大文件进来，浏览器卡死、内存爆掉、进度条不动……折腾了三天，最后搞定了。今天不讲理论，直接给你能跑的代码，亲测有效。 核心...

项目初期的技术选型 去年接了个直播带货的H5页面，客户要求在移动端能实时播放商品讲解视频，延迟尽量低。一开始我直接上<video>标签，结果发现普通MP4根本扛不住——首屏加载要七八秒，用...

我的写法，亲测靠谱 图片上传这事儿，看起来简单，但真做起来能踩出八百个坑。我刚开始做项目时，直接用 <input type="file"> 拿到文件就往后台扔，结果用户一传个 10MB 的...

项目初期的技术选型 上个月做的一个后台管理项目，用户要能批量操作表格里的数据：勾选几条记录，然后一键删除、导出、或者批量修改状态。一开始觉得这不就是加个 checkbox，维护个选中数组的事嘛，前端 ...

项目初期的技术选型 上个月做了一个数据可视化后台，客户要求能“在地图上圈出任意区域，然后筛选出该区域内的设备”。听起来简单，但实际一上手才发现坑不少。一开始我甚至想用现成的库，比如 Leaflet 或...

轨迹回放？别一上来就上高德地图 最近项目里又遇到轨迹回放的需求，不是那种简单的点对点动画，而是要能暂停、快进、拖动时间轴、还能实时显示当前速度和状态的那种。我第一反应是：“又来？上次用高德搞了三天，最...

项目初期的技术选型 上个月接了个需求，要在移动端展示门店分布，用户能点进地图看具体位置、导航，还能筛选不同类型的门店。老板一开始说“用高德吧”，但后端同事顺手查了下百度地图的API文档，发现他们有个现...

为什么我要折腾3D地图？ 最近接了个需求，要在网页里嵌个3D地图，展示城市建筑和数据分布。老板说“要酷一点”，产品经理说“最好能旋转缩放”，设计师甩过来一张Figma图，上面全是立体楼宇和飞线动画。我...

项目初期的技术选型 上个月接了个后台管理系统改造的活，需求里有个“点击行内字段直接弹窗编辑”的功能。一开始我以为就是个普通的模态框 + 表单，用现成的 UI 库（比如 Ant Design 或 Ele...

又踩坑了，拖拽表格行排序居然这么难搞 上周接到一个需求：在管理后台的表格里支持拖拽行排序。听起来很简单对吧？不就是加个拖拽功能嘛。结果我折腾了整整一天半，才把体验做得勉强能用。今天记录下踩过的坑，省得...

项目初期的技术选型 上个月接了个需求，要做一个动态签名板，用户能在手机上手写签名，然后保存成图片。听起来挺简单的，但一上手才发现水挺深。最初我考虑用 SVG，毕竟它支持矢量、缩放清晰，而且 DOM 操...

为啥要折腾右键菜单？ 最近在搞一个富文本编辑器，用户说“能不能加个右键菜单，像 Word 那样点一下就能复制格式、插入图片”。我一想，这不就是个 ContextMenu 嘛，简单。结果一动手，发现水还...

先看效果，再看代码 上周给一个 landing page 加了个视差滚动效果，客户看了直呼“高级”。其实核心逻辑就几行，但中间踩了几个坑，折腾了半天。今天直接上干货，把亲测有效的方案和容易翻车的地方都...

先看效果，再看代码 最近项目里有个需求，要根据用户滑动的方向来做不同的操作，比如上滑显示菜单，下滑隐藏菜单。这个东西听起来简单，但真做起来各种坑等着你。今天就来分享下我是怎么搞定它的。 核心代码就这几...

又踩坑了，React DnD拖拽不生效 最近在项目里用React DnD实现一个文件拖拽上传的功能，结果发现拖拽完全不生效。我一开始以为是配置问题，折腾了半天发现根本不是那么回事。 排查过程，折腾了半...

又踩坑了，touchmove滚动失效 在最近的一个移动端项目中，我遇到了一个棘手的问题：touchmove事件处理。这玩意儿看起来简单，但实际用起来却有很多坑。今天我就来对比一下几种常见的touchm...

我的写法，亲测靠谱 CSV导出这玩意儿在很多项目里都挺常见的，比如数据报表、用户导出等等。我一般这样处理，既能保证功能的稳定性，又能尽量减少坑。 首先，上代码： 这个函数 exportToCSV 接受...

先看效果，再看代码 上周改一个后台管理页的排序功能，用户要求能拖拽调整列表顺序。我一开始想用现成的库，比如 SortableJS，但项目里已经有一堆依赖了，不想再加。于是决定自己撸一个轻量版。折腾了半...

优化前：卡得不行 上周我们项目里有个右键菜单功能，用户反馈“点一下右键要等半秒才弹出来”，我一开始还不信，本地开发环境跑得挺顺的。结果一上测试环境，好家伙，点右键后整个页面卡住，鼠标转圈，连滚动都卡顿...

核心代码就这几行 拖拽排序这东西，我做过不下五次。每次一开始都想着“自己写个原生的吧”，结果折腾半天，不是滚动失效就是 touch 事件冲突，最后还是乖乖用现成方案。但如果你只是想快速实现一个列表拖拽...