uni-app中swipe-action点不动、滑不起因touchmove被父容器拦截,需外层加catch:touchmove或@touchmove.stop;options每项必含text和style;禁用animation、换纯色背景、加GPU加速可解决iOS闪退;跨端建议H5用swipe-action、APP降级长按菜单。

uni-app里swipe-action组件为什么点不动、滑不起来
因为默认没开touchmove拦截,真机上手势被scroll-view或父容器抢走了。尤其在u-list、uni-list里嵌套时,必须手动关掉父级滚动捕获。
- 在
swipe-action外层加catch:touchmove(微信小程序平台)或@touchmove.stop(H5/APP) - 如果用的是
scroll-view,确保它有enable-back-to-top="false"且没设scroll-y在列表项内部 - H5端需检查
css里是否误加了user-select: none或pointer-events: none - APP端(iOS)若滑动卡顿,试试给
swipe-action加style="will-change: transform;"
左滑菜单按钮点击后不触发@click的常见原因
不是事件没绑对,是swipe-action的options数组里每个按钮必须带text和style,缺任意一个都会让整个click失效——官方文档没明说,但实测如此。
-
options中每个对象至少要有text(哪怕空字符串"")和style(哪怕{}) - 别用
v-for动态生成options却不加,会导致点击态错乱</li> <li>按钮<code>click
回调里别直接this.$refs.xxx.open()再关自己,会触发两次关闭动画,UI卡住 - APP端点击区域偏小?加
style="min-width: 80px; padding: 0 12px;"到按钮slot内元素上
如何让左滑菜单像QQ一样「松手即删」而不是「滑到底才触发」
uni-app原生swipe-action只支持滑动阈值判定,不支持「松手自动完成」。得自己监听change事件+计算位移+调用ref.close()或ref.open()模拟。
- 给
swipe-action加ref="swipeRef"和@change="onSwipeChange" - 在
onSwipeChange里判断detail.direction === 'right'且Math.abs(detail.x) > 120(单位px)就立刻this.$refs.swipeRef.close() - 别用
setTimeout延迟执行关闭,APP端会有明显延迟感;改用this.$nextTick(() => this.$refs.swipeRef.close()) - 记得在
onSwipeChange开头加if (!detail.isOpened) return,避免重复触发
APP端iOS下左滑菜单闪退或白屏的兼容处理
本质是WKWebView对transform: translateX()的重绘异常,尤其配合transition时。不是代码写错了,是渲染管线崩了。
- 禁用
swipe-action的animation属性::animation="false" - 把删除按钮背景色从
linear-gradient换成纯色background-color - 列表项
view加style="-webkit-transform: translateZ(0);"强制启用GPU加速 - 如果用了
uni-app3.99+,确认manifest.json里mp-weixin配置没开useCustomTabBar,这个和swipe-action有冲突
滑动删除看着简单,但跨端时每个平台都在悄悄改手势判定逻辑。最稳的做法:H5用swipe-action,APP端降级为「长按呼出操作菜单」,iOS真机测试务必连Xcode看崩溃日志,别只信控制台输出。


















