uni-app中用swipe-action实现购物车左滑删除需：①为每个组件绑定唯一:key和ref；②删除前调用close()收起；③用filter替换数组确保响应式更新；④避免touch事件自实现，因多端兼容性差。
uni-app 里怎么用 swipe-action 实现购物车左滑删除
uni-app 官方组件 swipe-action 是最轻量、兼容性最好的方案，但默认不支持「滑动后自动回弹」或「只允许单个展开」——购物车场景下，用户一划多个商品，容易误操作或视觉混乱。
- 必须给每个
swipe-action加上唯一ref或绑定key，否则列表渲染时状态错乱（比如删了第 2 项，实际删的是第 1 项） - 不要在
v-for中直接写swipe-action而不加:key="item.id"，否则 Vue 的 diff 算法会复用 DOM，导致滑动状态残留 - 删除按钮点击后，建议先调用
swipeAction.close()主动收起，再执行删除逻辑，避免用户重复点击
为什么不能用 touchstart + touchmove 自己写左滑
手写滑动逻辑看似灵活，实际在 uni-app 多端（尤其是小程序）中极易失效：iOS 微信小程序禁用部分 touch 事件冒泡，Android 某些 WebView 对 touch-action: none 支持不一致，导致滑动卡顿、触发不了、或和页面滚动冲突。
- 真机调试时，
touchmove在微信小程序里可能被拦截，表现为“手指划了但没反应” - 自己计算位移要处理
px/rpx混用、不同屏幕宽度缩放、橡皮筋效果干扰等问题 -
swipe-action内部已针对各平台做了降级适配（如 H5 用 CSS transform，小程序用 cover-view），没必要重复造轮子
swipe-action 删除后列表闪烁或索引错位怎么办
本质是数据更新与视图更新不同步，尤其在使用 splice 或 filter 后未触发响应式更新时最明显。
- 别用
arr[i] = null或直接改数组某一项值，这不会触发 Vue 响应式——必须用this.$set(arr, i, newValue)或替换整个数组 - 推荐删除后用
this.cartList = this.cartList.filter(item => item.id !== targetId)，确保响应式生效 - 如果用了 Pinia/Vuex，请确认 mutation 是通过
state.list = newState赋值，而不是 push/splice 原地修改
微信小程序真机上左滑区域点不中？检查这几个地方
不是代码问题，大概率是样式或层级导致的「点击穿透」或「事件捕获失败」。
-
swipe-action的父容器不能有overflow: hidden，否则 cover-view 渲染异常（微信小程序限制） - 确保没有其他绝对定位元素（比如广告 banner、悬浮按钮）盖在滑动区域上方，哪怕透明也挡事件
- 在
app.vue全局样式里加一句* { -webkit-tap-highlight-color: transparent; }，能解决部分 iOS 点击延迟/失灵
滑动删除看着简单，但跨端一致性、列表状态管理、事件捕获边界——这三个地方出问题，90% 的“删不对”“点不动”“闪一下”就都解释得通了。
