uni-app uni-swipe-action 控件在小程序中出现双击问题

uni-app uni-swipe-action 控件在小程序中出现双击问题

项目信息 详情
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.1.18
第三方开发者工具版本号 3.1.18
基础库版本号 3.1.18
项目创建方式 HBuilderX

示例代码：

<view v-for="(item, index) in list" :key="index">
<uni-swipe-action>
<uni-swipe-action-item :right-options="options1" @click="bindClick($event,item.ExpenseId)">
<view style="display: flex;flex-direction: row; background: #FFFFFF;flex: 1;">
{{item.ExpenseTitle}}
</view>
</uni-swipe-action-item>
</uni-swipe-action>
</view>
<uni-load-more :status="loadingType"></uni-load-more>

操作步骤：

  • 滑动操作按键，点击就可以

预期结果：

  • 滑动操作按键，点击就可以

实际结果：

  • 滑动操作按键，点击就可以

bug描述：

uni-swipe-action 滑动操作这个控件在小程序会双击，如果点击滑动的按键，按键是跳转页面的话，会跳转2次


更多关于uni-app uni-swipe-action 控件在小程序中出现双击问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

问题已经修复 ，插件市场更新最新组件

更多关于uni-app uni-swipe-action 控件在小程序中出现双击问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这么快

这个问题是由于 uni-swipe-action 组件在小程序端的点击事件冒泡机制导致的。当点击滑动操作按钮时，事件会触发两次：一次来自按钮本身的点击，另一次来自父级元素的冒泡。

解决方案是在 @click 事件处理函数中添加阻止事件冒泡：

<uni-swipe-action-item 
  :right-options="options1" 
  [@click](/user/click)="bindClick($event,item.ExpenseId)">
</uni-swipe-action-item>

在 bindClick 方法中：

bindClick(e, expenseId) {
  e.stopPropagation(); // 阻止事件冒泡
  // 原有的跳转逻辑
  uni.navigateTo({
    url: '/pages/detail/detail?id=' + expenseId
  });
}

如果问题仍然存在，可以尝试使用 @tap 事件替代 @click：

<uni-swipe-action-item 
  :right-options="options1" 
  [@tap](/user/tap)="bindClick($event,item.ExpenseId)">
</uni-swipe-action-item>

另外，确保在 bindClick 方法中添加防抖逻辑，避免快速连续点击：

let isClicking = false;
bindClick(e, expenseId) {
  if (isClicking) return;
  isClicking = true;
  
  e.stopPropagation();
  uni.navigateTo({
    url: '/pages/detail/detail?id=' + expenseId
  });
  
  setTimeout(() => {
    isClicking = false;
  }, 500);
}
回到顶部