uni-app 中 swiper 组件默认拦截 touch 事件以保障滑动交互，导致子元素点击失效；需加 catchtouchmove 并用 @tap；uni-swipe-action 需手动实现确认弹窗与收起逻辑，注意 ref 管理和样式布局。

uni-app 中 swiper 组件为什么不能直接响应点击事件？

因为 swiper 默认会拦截内部区域的 touch 事件，导致子元素（比如删除按钮）的 @click 或 @tap 无法触发。这不是 bug，而是为滑动交互做的默认保护。

• 必须给可点击区域（如删除按钮）加 catchtouchmove 属性，阻止事件冒泡被 swiper 拦截
• 同时建议用 @tap 而非 @click，移动端更可靠
• 若使用 uni-swipe-action，它内部已处理了这些细节，但自定义样式时仍需注意 slot 内部的事件绑定方式

如何用 uni-swipe-action 实现带确认弹窗的滑动删除？

官方组件支持左滑/右滑，但“确认”逻辑需自己补全——它只负责展开动作，不自动弹窗或执行删除。

• 在 的 里放一个按钮，绑定 @tap="showConfirm(index)"
• showConfirm 方法中调用 uni.showModal，确认后调用实际删除逻辑，并手动收起滑动项：this.$refs.swipeRef.close()
• 必须给 uni-swipe-action 加 ref，否则无法主动关闭；每个 item 需独立 ref 或用数组管理，避免多个 item 共用一个 ref

<uni-swipe-action ref="swipeRef"><slot></slot><slot name="right"><button catchtouchmove="true">删除</button>
  </slot></uni-swipe-action>

自定义删除按钮样式后，为什么滑动区域变小或失效？

常见原因是父容器或按钮自身设置了 overflow: hidden、position: absolute 未正确占位，或宽高为 0。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

• 确保 slot name="right" 内容器有明确宽度（如 width: 80px），且未被父级 overflow: hidden 截断
• 避免在按钮上写 position: absolute 后忘记设置 top/right 偏移，导致脱离文档流、触摸区域丢失
• 真机调试时，iOS 上若按钮无背景色或文字，可能因「不可见区域不响应」而误判为失效，务必加 background-color 或 border

列表滚动时滑动项未自动收起，怎么统一关闭？

用户快速滚动列表，之前打开的 uni-swipe-action 仍保持展开状态，体验割裂，且影响后续操作。

• 监听 @scroll 事件，在滚动开始时遍历所有 swipe ref 并调用 close()
• 更稳妥的做法是：在 onPageScroll 生命周期钩子中统一收起（适用于页面级滚动）
• 如果用的是 scroll-view，则需在其 @scroll 事件回调里处理，注意节流，避免频繁调用 close() 影响性能

复杂点在于 ref 管理——列表长时，不要用 v-for 直接绑同一个 ref，要用 :ref="(el) => { swipeRefs[index] = el }" 动态收集。