uni-app uni-swipe-action和uni-popup按钮位置重合时触发按钮事件冲突

uni-app uni-swipe-action和uni-popup按钮位置重合时触发按钮事件冲突

bug描述：

报Bug：uni-swipe-action和uni-popup的按钮位置重合时，触发按钮事件冲突

问题描述：

当同时使用 侧滑uni-swipe-action 和 弹出框uni-popup 组件时，侧滑按钮不可避免和弹出框的按钮在页面上出现不同时间顺序的层叠交叉，点击交叉点位时，有可能会同时触发两个按钮的事件，这并不是我们想要的情况；演示如下：

视频描述：

  • 侧滑和弹出框点击事件冲突：
  • 正常情况下：

暂时解决方案

在侧滑按钮点击事件回调里面，设置200ms延迟后，再弹出 popup，可临时解决这个问题；


| 信息类型       | 信息内容         |
|----------------|------------------|
| 产品分类       | uniapp/App       |
| PC开发环境     | Windows          |
| PC开发环境版本 | Windows 11       |
| HBuilderX类型  | 正式             |
| HBuilderX版本  | 3.96             |
| 手机系统       | Android          |
| 手机系统版本   | Android 13       |
| 手机厂商       | ROG6 pro         |
| 手机机型       | ROG6 pro         |
| 页面类型       | vue              |
| Vue版本        | vue3             |
| 打包方式       | 离线             |
| 项目创建方式   | HBuilderX        |

更多关于uni-app uni-swipe-action和uni-popup按钮位置重合时触发按钮事件冲突的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app uni-swipe-action和uni-popup按钮位置重合时触发按钮事件冲突的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 uni-app 开发时，如果你遇到了 uni-swipe-action 和 uni-popup 按钮位置重合时触发按钮事件冲突的问题，可以尝试以下解决方案：

1. 事件冒泡阻止

在 uni-swipe-action 的按钮点击事件中，使用 e.stopPropagation() 阻止事件冒泡，避免事件传递到 uni-popup 的按钮上。

methods: {
  handleSwipeActionButtonClick(e) {
    e.stopPropagation(); // 阻止事件冒泡
    // 处理按钮点击事件
  }
}

2. 调整布局

调整 uni-swipe-action 和 uni-popup 的布局，使它们的按钮不重叠。可以通过调整 uni-popup 的位置或大小来避免冲突。

<uni-swipe-action>
  <!-- swipe-action 内容 -->
</uni-swipe-action>
<uni-popup position="bottom">
  <!-- popup 内容 -->
</uni-popup>

3. 控制 uni-popup 的显示

在 uni-swipe-action 的按钮点击事件中，手动控制 uni-popup 的显示和隐藏，避免同时触发两者的按钮事件。

methods: {
  handleSwipeActionButtonClick() {
    // 处理按钮点击事件
    this.$refs.popup.close(); // 关闭 popup
  }
}

4. 使用 z-index 控制层级

通过 CSS 的 z-index 属性控制 uni-swipe-action 和 uni-popup 的层级，确保 uni-popup 在 uni-swipe-action 之上或之下，避免点击事件的冲突。

.swipe-action {
  z-index: 1;
}
.popup {
  z-index: 2;
}

5. 自定义事件处理

在 uni-swipe-action 和 uni-popup 的按钮点击事件中，自定义事件处理逻辑，确保在特定条件下只触发其中一个事件。

methods: {
  handleSwipeActionButtonClick() {
    if (!this.popupVisible) {
      // 处理 swipe-action 按钮点击事件
    }
  },
  handlePopupButtonClick() {
    if (this.popupVisible) {
      // 处理 popup 按钮点击事件
    }
  }
}

6. 使用 touch 事件

如果点击事件冲突无法解决，可以尝试使用 touch 事件代替 click 事件，手动处理触摸逻辑。

methods: {
  handleSwipeActionTouchStart(e) {
    // 处理 touch 事件
  },
  handlePopupTouchStart(e) {
    // 处理 touch 事件
  }
}
回到顶部