uni-app nvue下使用uni-swipe-action组件时,左滑触发onChange事件2次导致显示闪烁
uni-app nvue下使用uni-swipe-action组件时,左滑触发onChange事件2次导致显示闪烁
必须真机运行,模拟器复现不了,代码使用的nui官方的例子
```log
14:32:01.689 right at pages/swipe-action/swipe-action.nvue:34
14:32:01.711 none at pages/swipe-action/swipe-action.nvue:34
14:32:02.724 right at pages/swipe-action/swipe-action.nvue:34
14:32:02.749 none at pages/swipe-action/swipe-action.nvue:34
真机运行的时候,左滑的时候右侧明显来回抖动,附件中是代码和视频
| 文件名 | 链接 |
|---|---|
| uni-swipe-action_滑动操作示例.zip | 下载 |
| 1639550046073804.mp4_.zip | 下载 |
更多关于uni-app nvue下使用uni-swipe-action组件时,左滑触发onChange事件2次导致显示闪烁的实战教程也可以访问 https://www.itying.com/category-93-b0.html
1 回复
更多关于uni-app nvue下使用uni-swipe-action组件时,左滑触发onChange事件2次导致显示闪烁的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在 nvue 中使用 uni-swipe-action 组件时,onChange 事件被触发两次导致界面闪烁,这通常是由于 nvue 的渲染机制与 vue 页面不同所致。nvue 基于原生渲染,事件响应和界面更新可能更频繁,容易引发多次触发。
从日志看,事件依次输出 right 和 none,表明滑动过程中状态变化被捕获了两次:一次是滑动展开时,一次是组件可能因布局调整或渲染刷新而重置状态。这种快速连续的状态切换会导致界面抖动。
解决思路:
- 使用防抖处理:在
onChange事件处理函数中加入防抖逻辑,避免短时间内重复响应。例如,设置一个时间阈值(如 100ms),在该时间内只执行一次状态更新。let timer = null; function handleChange(e) { if (timer) clearTimeout(timer); timer = setTimeout(() => { // 更新状态或执行操作 console.log(e); }, 100); }

