uni-app实现列表侧滑删除 uni-app使用uni-swipe-action组件-uni-app-PHP中文网

uni-swipe-action跨平台表现不一致：h5因css transform和touch事件兼容性问题滑动失效，小程序因原生实现差异导致按钮错位；需手动控制阈值、状态重置与dom更新。

uni-app实现列表侧滑删除 uni-app使用uni-swipe-action组件

uni-swipe-action 在 H5 和小程序平台表现不一致

直接用 uni-swipe-action 写完发现 H5 上滑不动、小程序里按钮错位，不是代码写错了，是组件本身对平台支持有差异。H5 端依赖 CSS transform 模拟滑动，但部分浏览器（尤其是 iOS Safari）对 touchstart 事件拦截不稳；小程序端则依赖原生 movable-view 或自定义渲染，各平台实现逻辑不同。

实操建议：

优先在微信小程序真机调试，H5 端务必加 catchtouchmove="true" 到外层容器防止滚动冲突
避免在 uni-swipe-action 内嵌套 scroll-view 或高度不确定的 view，否则滑动区域计算会失准
若需全平台统一体验，改用 uni-app 官方推荐的「左滑呼出操作菜单」方案：监听 touchstart/touchmove 手动控制 transform: translateX()，配合 transition 实现回弹

删除按钮点击后列表不更新或状态残留

点「删除」后 UI 没反应，或者 swipe 区域还卡在左滑状态，常见原因是没正确触发响应式更新或未重置组件内部状态。

实操建议：

删除操作必须用 this.$delete(this.list, index) 或 this.list.splice(index, 1)，不能只改数据引用（如 list = list.filter(...)）
调用 uni-swipe-action 的 close() 方法前，确保 DOM 已完成移除。可在 $nextTick 后执行：
```
this.list.splice(index, 1)<br>this.$nextTick(() => {<br>  this.$refs.swipeRef?.close()<br>)
```
每个 uni-swipe-action 必须绑定唯一 ref（如 :ref="'swipe-' + index"），否则 close() 只会作用于最后一个实例

侧滑距离和阻力参数难调，松手后不回弹或直接触发删除

uni-swipe-action 默认没有暴露「临界滑动距离」或「回弹阈值」配置，threshold 属性仅控制是否允许滑动，不决定触发动作的松手位置。

uni-app

uni-app 官方文档、npm 包和项目创建入口。

下载

实操建议：

不要依赖 threshold 做业务判断，它只是开关，实际触发靠 click 事件里的 detail.content 字段识别按钮

想实现「滑过 60% 宽度才自动删除」，得自己监听 change 事件，记录 detail.x 值，在 touchend 时比对：

@change="onSwipeChange"<br>@touchend="onTouchEnd"<br>// ...<br>onSwipeChange(e) { this.currentX = e.detail.x }<br>onTouchEnd() {<br>  if (Math.abs(this.currentX) > this.itemWidth * 0.6) {<br>    this.handleDelete()<br>  } else {<br>    this.$refs.swipeRef?.close()<br>  }<br>}

注意 itemWidth 需动态获取（this.$refs.item?.$el?.getBoundingClientRect().width），不能写死

在 uView 或 uni-ui 项目中与 `u-list` / `uni-list` 嵌套时样式错乱

把 uni-swipe-action 套在 uni-list-item 外面，结果左右边距异常、圆角消失、甚至整个列表被压扁——根本原因是 uni-list-item 内部用了 display: flex + overflow: hidden，而 uni-swipe-action 依赖绝对定位子元素撑开宽度。

实操建议：

放弃直接嵌套，改用「裸 view + 手动实现列表样式」：用 padding、border-bottom、font-size 等还原 uni-list-item 视觉，换取对 uni-swipe-action 的完全控制
如果必须用 uni-list，把 uni-swipe-action 放进 uni-list-item 的 slot="body"，并给外层加 style="overflow: visible"
所有自定义按钮的 width 必须显式设置（如 width: 120rpx），不能依赖内容撑开，否则在不同屏幕下错位概率极高