交互
探索用户交互全链路疑问，解答交互设计、动效实现与体验优化中的各类交互难题。
-
2
回答
46浏览
WebSocket 收到消息后怎么准确更新未读数？
我用 WebSocket 做了个聊天页面，用户离线时消息会存到数据库，上线后拉取历史消息。但现在有个问题：收到新消息时，我直接 unreadCount++，但如果用户已经打开了聊天窗口（即已读状态），...
-
1
回答
26浏览
步骤进度加载状态怎么同步更新？
我在做一个多步骤表单，每完成一步就调用接口保存数据，但进度条的状态老是跟不上实际步骤。比如我已经走到第三步了，进度条还停在第二步，明明 state 里 step 已经是 3 了。 我试过在 useEf...
-
1
回答
36浏览
在线状态同步不及时，WebSocket 心跳怎么处理才靠谱？
我在做一个聊天应用，用 WebSocket 实现用户在线状态。目前的做法是用户连接时设为 online，断开就设 offline。但实际测试发现，如果用户直接关掉浏览器或者网络突然中断，服务端收不到 ...
-
2
回答
36浏览
Spinner 加载动画在按钮里显示不居中怎么办？
我在用 Tailwind CSS 写一个带加载状态的提交按钮，但 Spinner 图标总是偏上，没法垂直居中。明明用了 flex items-center justify-center，可还是歪的。 ...
-
2
回答
51浏览
桌面通知在Vue中为什么点不动？
我在Vue组件里调用Notification API，通知能弹出来，但点击没反应，根本进不了click事件。试过加addEventListener也不行，是不是写法有问题？ 这是我的代码： <t...
-
1
回答
68浏览
后端返回的时间戳怎么在Vue里格式化成“YYYY-MM-DD”？
我从接口拿到的数据里有个 create_time 字段，是时间戳（比如 1712345678），想在页面上显示成 “2024-04-05” 这种格式。试过直接用 new Date(item.creat...
-
1
回答
20浏览
Final Form 表单提交后无法重置字段值是怎么回事？
我用 Final Form 做了个简单的登录表单，提交成功后调用了 form.reset()，但输入框里的内容没清空，还是显示之前填的值，这是为啥？ 我试过在 onSubmit 里直接调 reset，...
-
1
回答
31浏览
延迟反馈导致用户重复点击怎么办？
我在做一个表单提交功能，用户点击“提交”后要等大概2秒才有响应（后端处理慢）。结果用户以为没点上，疯狂点好几次，最后提交了多份相同数据。我试过加 loading 状态禁用按钮，但有时候网络特别差，lo...
-
1
回答
39浏览
Alt键触发的CSS快捷键样式不生效怎么办？
我在做网页的键盘导航功能，想用Alt+某个字母来高亮对应的按钮，但加了:focus和:active都没反应。是不是Alt键需要特殊处理？ 试过监听keydown事件能捕获到Alt组合键，但纯CSS里好...
-
2
回答
29浏览
虚拟列表滚动时元素高度不一致导致错位怎么办？
我用 React 实现了一个虚拟列表，但列表项高度不固定（有的带展开详情，有的没有），滚动一会儿就出现内容错位或者空白。试过用 react-window 的 VariableSizeList，但还是不...
-
1
回答
52浏览
大文件上传时浏览器崩溃怎么办？
我用普通的 FormData 上传一个 2GB 的视频文件，结果浏览器直接卡死甚至崩溃了。试过 Chrome 和 Edge 都一样。 是不是不能一次性读整个文件？有没有办法分片上传？我看到有些网站能传...
-
1
回答
30浏览
React中加载状态不显示，怎么回事？
我在用React做数据请求，明明设置了loading状态，但界面上就是不显示加载动画，卡在空白那里。 我试过在useEffect里把loading设为true，请求完再设回false，逻辑看起来没问题...
-
1
回答
37浏览
点击按钮后视觉反馈延迟，怎么优化？
我在做表单提交按钮的加载状态反馈，但用户点击后 UI 要等几百毫秒才变，感觉卡卡的。明明 setState 是同步的啊？是不是哪里写错了？ 我试过把 loading 状态提前设为 true，但还是有明...
-
1
回答
27浏览
WebGL 渲染大量点数据时卡顿怎么办？
我在用 WebGL 做一个实时数据监控图表，点数大概有 5 万左右，但一渲染就特别卡，帧率掉到个位数。已经用了 gl.drawArrays(gl.POINTS, 0, count)，也尝试过合并 bu...
-
1
回答
43浏览
加载遮罩怎么在异步请求期间正确显示和隐藏？
我做了一个表单提交功能，想在请求期间加个全屏遮罩防止重复点击，但遮罩有时候不消失，特别是在请求出错的时候。我试过在 finally 里关掉遮罩，但好像没生效。 这是我的代码： const showLo...
-
1
回答
50浏览
画布缩放后元素位置偏移怎么办？
我在做一个可视化编辑器，用 transform: scale() 缩放画布后，拖拽元素的位置总是对不上，鼠标点哪都不准，感觉坐标没跟着缩放比例调整。 试过用 getBoundingClientRect...
-
1
回答
43浏览
用 sortablejs 拖拽时元素样式错乱怎么办？
我在用 SortableJS 做一个可拖拽排序的列表，但一拖起来元素就跑偏了，原本是 flex 布局横向排列，拖动时却变成竖着堆叠，而且宽度也不对。试过加 transform: translate 不...
-
1
回答
36浏览
为什么 smooth scroll 在 Vue 里有时候不生效？
我在 Vue 项目里用 scrollIntoView({ behavior: 'smooth' }) 实现平滑滚动，但有时候完全没效果，直接跳转。试过加 CSS 的 scroll-behavior: ...
-
2
回答
24浏览
虚拟滚动列表高度计算不准确怎么办？
我在用原生 JS 实现虚拟滚动时，发现可视区域的 item 高度算不准，导致滚动时内容错位或者空白。每个 item 的高度是动态的（比如文本长度不同），我尝试用 getBoundingClientRe...
-
1
回答
24浏览
表单验证时自定义错误提示样式不生效怎么办？
我在做登录表单的验证，想给 input 的错误状态加个红色边框，但写了 CSS 却没效果。是不是被浏览器默认样式覆盖了？ 我试过用 :invalid 伪类，也加了 !important，还是不行。控制...
