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 基于原生渲染,事件响应和界面更新可能更频繁,容易引发多次触发。

从日志看,事件依次输出 rightnone,表明滑动过程中状态变化被捕获了两次:一次是滑动展开时,一次是组件可能因布局调整或渲染刷新而重置状态。这种快速连续的状态切换会导致界面抖动。

解决思路

  1. 使用防抖处理:在 onChange 事件处理函数中加入防抖逻辑,避免短时间内重复响应。例如,设置一个时间阈值(如 100ms),在该时间内只执行一次状态更新。
    let timer = null;
    function handleChange(e) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            // 更新状态或执行操作
            console.log(e);
        }, 100);
    }
回到顶部