uni-drawer点不动、划不出来是因为默认不响应手势,需手动控制显隐、确保mode与滑动方向一致、H5加touchmove阻止默认行为、App端检查splitChunks配置。

uni-app 里 uni-drawer 为什么点不动、划不出来?
不是组件没加载,而是它默认不响应手势,且必须手动控制显隐状态——uni-drawer 不像原生侧滑菜单那样自动绑定 swipe 手势,也不监听 touchstart 或 pan。你得自己接住左滑动作,再调用 open() 或改 show 值。
- 务必在页面
data中声明drawerVisible: false,并绑定到show属性,不能只靠ref调方法 - 如果用了
mode="right"却从左边划,当然没反应;mode必须和触发方向一致("left"对应左滑呼出) - H5 端需额外加
touchmove阻止默认行为,否则页面会跟着滑动,侧滑菜单卡顿或失效 - App 端真机测试时,确保
vue.config.js没误删optimization.splitChunks,否则uni-drawer的内部 touch 处理逻辑可能未加载
不用 uni-drawer,手写左滑菜单怎么防抖+边界吸附?
原生实现更可控,但容易在快速来回滑动时状态错乱,或松手后停在中间位置。关键不是“滑多远”,而是“松手时速度 + 当前偏移量”共同决定是否吸附展开/收起。
- 监听
touchstart记下初始clientX,touchmove算差值作为offsetX,但别直接赋给transform: translateX(),先做节流(比如 16ms 一次) - 松手(
touchend)时,若Math.abs(offsetX) > 120或速度 > 0.3px/ms,则动画展开;否则回弹,用css transition+transform实现,别用setTimeout模拟 - 记得在
touchmove里加e.preventDefault(),否则 iOS 下会触发页面滚动,侧滑中断 - App 端要处理
plus.screen.lockOrientation("portrait-primary")后的旋转事件,否则横屏时clientX计算偏移错乱
onPullDownRefresh 和侧滑菜单冲突怎么办?
下拉刷新和左滑菜单都依赖 touchstart → touchmove,uni-app 默认把整个页面区域交给 onPullDownRefresh 管理,一旦开启,左滑手势大概率被拦截。
- 关闭全局下拉:在
pages.json对应页面配置里删掉"pullToRefresh",改用自定义下拉组件(如uni-refresh),它允许设置threshold和disabled状态 - 或者保留原生下拉,但在侧滑区域(如
header或navbar)加catchtouchmove,阻止事件冒泡到 page 根节点 - App 端可调用
uni.hideNavigationBarLoading()配合手动触发刷新逻辑,绕过原生生命周期钩子
iOS 上侧滑菜单边缘拖拽不灵敏的硬伤怎么绕?
iOS Safari 对屏幕边缘 touchstart 的判定极严,尤其在状态栏下方 20px 区域,clientX 可能返回 0,导致无法识别左滑意图。
- 不要只监听
<view class="drawer-trigger">这种小按钮,而是在<page>根节点监听,用event.touches[0].clientX判定是否< 40(适配 iPhone X+ 安全区) - 在
App.vue全局注入document.addEventListener('touchstart', ...),但注意仅在当前页面路由匹配时才启用,避免跨页干扰 - 真机调试时打开 Safari Web Inspector,检查
event.target是否意外是body或scroll-view,它们可能吞掉事件
侧滑菜单最难的从来不是“怎么动起来”,而是“什么时候不该动”——比如键盘弹出时、picker 展开时、web-view 加载中,这些状态都要主动锁死手势,否则用户一划就闪退或白屏。别等线上报 bug 才补 v-if 控制,从第一个 commit 就该埋好开关。



















