H5上uni-swipe-action滑不动是因父容器overflow或touch-action拦截,需确保父元素无overflow:hidden、touch-action:pan-y,pages.json设"disableScroll":false,外层加catchtouchmove="true",且不可嵌套在scroll-view内。

uni-swipe-action在H5上滑不动,怎么 fix?
不是代码写错,是H5端依赖CSS transform模拟滑动,但被父容器的overflow或touch-action拦住了。iOS Safari对touchstart拦截尤其敏感。
- 确保
uni-swipe-action直接父元素没设overflow: hidden或touch-action: pan-y - H5页面在
pages.json里必须设"disableScroll": false(默认是true) - 外层容器加
catchtouchmove="true",防滚动冲突 - 别把
uni-swipe-action塞进scroll-view——它会吞掉touchstart,换成view+height: 60vh; overflow-y: auto
删完列表UI不更新,常见错误在哪?
Vue 2.x对数组索引赋值和length截断不响应,直接this.list[index] = null或this.list.length--不会刷新视图。
- 必须用
this.list.splice(index, 1),这是Vue能侦测到的变异方法 - 删除后立刻调
this.$nextTick(() => { this.$refs.swipeRef?.close() }),否则DOM还没移除就调close()会卡住状态 - 每个
uni-swipe-action要绑定唯一ref,比如:ref="'swipe-' + index",不然close()只作用于最后一个 - 如果用Pinia/Vuex,确保组件通过
computed读取最新数据,而不是缓存原始引用
小程序里按钮错位、App端卡顿,怎么调?
小程序靠原生movable-view,App端(vue2)依赖renderjs,H5纯CSS模拟——三端底层不同,不能一套配置打天下。
- 微信小程序中,
uni-swipe-action必须放在scroll-view外部;App端确认已启用renderjs支持,否则滑动反馈延迟 - 按钮样式别全靠
options:小程序只认text和backgroundColor,fontSize/borderRadius会被忽略;用slot="right"自定义内容更可控 - 自定义按钮宽度要用CSS Hack:
::v-deep .uni-swipe-button-group { width: calc(100vw - 750rpx); },100vw按屏幕算,不是父容器 - App端真卡顿?说明
uni-swipe-action降级为“假滑动”了,得手写touchstart/touchmove+transform: translateX(),配合will-change: transform启硬件加速
想滑过60%才自动删除,threshold不管用怎么办?
threshold只是开关,不是业务阈值。它控制是否允许滑动,不决定松手后触发什么动作。
- 监听
@change事件取e.detail.x,记录实时偏移量 - 在
@touchend里判断:if (Math.abs(this.currentX) > this.itemWidth * 0.6)再执行删除,否则调close() - 回弹动画要用
cubic-bezier(0.2, 0.8, 0.4, 1),比ease-out跟手;松手瞬间关掉transition,再开,避免拖拽过程卡顿 - 别忘了限制最大偏移:
Math.max(-120, Math.min(0, diff)),否则滑太猛收不回来
侧滑删除看着简单,真正落地时平台差异、响应式更新、事件拦截、动画节奏全是连环坑。最常被忽略的是:H5和小程序根本不是同一套实现逻辑,硬套一套代码只会一半失效、一半错位。


















