uni-swipe-action在H5和小程序平台表现不一致：H5依赖CSS transform易卡顿、回弹异常、iOS微信不响应；需设固定高度、禁用flex:1/height:100%；删除须splice数据并用item.id作key；多swipe-item时需禁用滑动返回；自定义按钮需用.uni-swipe-content类和flex布局。
uni-swipe-action 在 H5 和小程序平台表现不一致
uni-swipe-action 是
uni-app
官方提供的滑动删除组件，但它在不同平台的底层实现差异很大：H5 上靠 CSS transform 模拟，小程序则调用原生
或
。这导致常见问题包括：H5 上滑动卡顿、手指松开后回弹异常、iOS 微信浏览器里完全不响应触摸。
实操建议：
必须为
的直接子元素（即
）设置固定高度，例如
，否则 H5 端无法正确计算滑动边界
避免在
内使用
或
布局，会破坏内部 touch 事件捕获区域
真机调试优先选微信开发者工具或 iOS Safari —— H5 浏览器模拟器常误判
事件
删除按钮点击后列表数据没更新或索引错乱
这是最常被忽略的逻辑陷阱：滑动删除只是视觉交互，
回调里不手动
或
数据，UI 就不会变；更糟的是，如果用
的
作为唯一 key，删除某一项后后续项的 index 改变，可能导致状态错绑（比如删了第 2 条，第 3 条的开关状态被误认为是第 2 条的）。
实操建议：
删除回调中必须显式修改原始数组，例如：
，不能只改
必须用稳定唯一标识作 key，例如
，禁用
如果删除涉及接口请求，建议先
，再发请求；失败时再
或
恢复，避免 UI 卡在“半删除”状态
多个 swipe-item 共存时手势冲突：左滑打开菜单，右滑却触发返回
在页面级启用
或使用
后，部分安卓手机（尤其华为 EMUI）会把右滑手势识别为「返回上一页」，与
的右滑操作冲突，结果就是 swipe-item 拉不开，直接退出当前页。
uni-app电商系统实战精讲课程课件
uni-app电商系统实战精讲课程
下载
实操建议：
在
中关闭对应页面的下拉刷新和滑动返回：
，
（后者可防页面级滚动干扰）
给
添加
显式启用，避免父容器
或
意外拦截 touch 事件
如需保留右滑返回，可在
中调用
并提示用户「请使用顶部返回按钮」，主动规避手势竞争
自定义删除按钮图标和文字对齐失效
官方文档说支持 slot 插入按钮，但实际中常出现文字偏上、图标大小不一、点击热区过小等问题。根本原因是
内部用绝对定位包裹 slot，默认未重置
和
。
实操建议：
slot 内容器必须加
（官方类名），并设
图标用
而非 img 标签，尺寸统一设为
，避免因图片加载延迟导致布局抖动
按钮文字字号建议用
，小于 24rpx 在 iPhone 上易被系统缩放裁切
复杂点在于 swipe-action 的动画依赖内部
计算，任何外部
、
或未闭合的 flex 布局都可能让
获取的宽度失准 —— 这类问题只能靠真机反复测滑动临界值，模拟器看不出。
swipermovable-areaheight: 80rpxflex: 1height: 100%touchstart@clicksplicefilterv-forindexthis.list.splice(index, 1)item.isDeleted = truev-for:key="item.id":key="index"spliceunshiftpushenablePullDownRefreshuni.navigateTouni-swipe-actionpages.json"enablePullDownRefresh": false"disableScroll": true:disabled="false"overflow: hiddenpointer-events: noneonLoaduni.hideHomeButton()uni-swipe-action-itemline-heightvertical-alignclass="uni-swipe-content"display: flex; align-items: center; justify-content: center;size="24"font-size: 28rpxtransformXmarginpaddinggetBoundingClientRect()