uni-drawer 最稳用法：须用 ref 调用 open()/close()，宽度用 rpx 或带单位 px，mask 控制遮罩，Android 需 onBackPress 主动关闭，内容滚动需 height:100%+overflow-y:auto 或 nvue 下用 scroll-view，鸿蒙需适配 safe-area 和 touch 事件。
uni-drawer 组件怎么用最稳？uni-drawer 是 uni-app 官方推荐的抽屉组件，封装了手势、遮罩、动画和平台兼容逻辑，比手写 position: fixed + transform 更可靠。它默认支持 left / right 模式，但不支持 top / bottom；宽度单位推荐用 rpx 或带单位的 px（如 "240rpx"），纯数字会被当作 px 处理，但在某些小程序平台可能失效。
- 必须通过
ref 调用 open() / close() 方法控制显隐，v-model 仅响应状态变化，不能触发打开
-
mask 属性控制遮罩层，默认为 true；设为 false 后点击遮罩不会关闭抽屉，需手动监听 @click 或手势
- 在 App 端（尤其是 Android）若抽屉闪退或卡住，大概率是未在
onBackPress 中主动 close()，导致返回键行为冲突
自定义内容滚动不生效？检查这三点
抽屉里内容超长却无法滚动，不是样式没加 overflow-y: auto 就能解决。uni-app 的 uni-drawer 内部容器默认高度为 100vh，但在小程序中 vh 不可靠，且 H5 下若父级未设高度，滚动会失效。
- 抽屉内容区域必须包裹在一层有明确高度的容器中（比如
view class="drawer-content"），并设置 height: 100% + overflow-y: auto
- 使用
nvue 页面时，scroll-view 才是唯一可靠的滚动容器，view + overflow 无效
- 若使用插槽（如
default 插槽）传入复杂结构，注意避免外层 view 被编译器“扁平化”丢失高度上下文——建议显式加 style="height: 100%"
鸿蒙（HarmonyOS）适配要注意什么？
鸿蒙 NEXT 对 Webview 渲染路径做了调整，uni-drawer 的 touchmove 手势在部分设备上响应迟钝或被系统侧滑返回劫持。
- 必须在
manifest.json 中开启 "softKeyboard": "adjustResize"，否则抽屉弹出时软键盘顶起界面会导致布局错乱
- 鸿蒙下
touchstart / touchmove 的事件对象缺少 touches[0].clientX，建议改用 event.changedTouches[0] 获取坐标
- 安全区域（statusBar、navigationBar）需手动适配：抽屉头部要加
padding-top: env(safe-area-inset-top)，否则文字被刘海遮挡
想换主题或加多级菜单？别硬改 uni-draweruni-drawer 本身只负责“抽出来关回去”，不处理菜单渲染逻辑。强行往里面塞 v-for + children 展开逻辑，容易让组件变重、手势卡顿，也违背单一职责。
- 多级菜单建议用独立组件（如
tri-side-nav）嵌入抽屉内容区，它支持分组、手风琴、主题切换，且已做鸿蒙手势优化
- 主题切换不要依赖
uni-drawer 的 dark 属性（它只影响自身背景色），而是通过全局 CSS 变量 + watch 监听 $u.colorMode 或 prefers-color-scheme 动态切类名
- 如果需要“点击菜单项后自动收起抽屉”，别在
@click 里直接调 this.$refs.drawer.close()，而应 nextTick 包裹，否则 H5 下动画中断
ref 调用 open() / close() 方法控制显隐，v-model 仅响应状态变化，不能触发打开mask 属性控制遮罩层，默认为 true；设为 false 后点击遮罩不会关闭抽屉，需手动监听 @click 或手势onBackPress 中主动 close()，导致返回键行为冲突overflow-y: auto 就能解决。uni-app 的 uni-drawer 内部容器默认高度为 100vh，但在小程序中 vh 不可靠，且 H5 下若父级未设高度，滚动会失效。
- 抽屉内容区域必须包裹在一层有明确高度的容器中（比如
view class="drawer-content"），并设置height: 100%+overflow-y: auto - 使用
nvue页面时，scroll-view才是唯一可靠的滚动容器，view+overflow无效 - 若使用插槽（如
default插槽）传入复杂结构，注意避免外层view被编译器“扁平化”丢失高度上下文——建议显式加style="height: 100%"
鸿蒙（HarmonyOS）适配要注意什么？
鸿蒙 NEXT 对 Webview 渲染路径做了调整，uni-drawer 的 touchmove 手势在部分设备上响应迟钝或被系统侧滑返回劫持。
- 必须在
manifest.json 中开启 "softKeyboard": "adjustResize"，否则抽屉弹出时软键盘顶起界面会导致布局错乱
- 鸿蒙下
touchstart / touchmove 的事件对象缺少 touches[0].clientX，建议改用 event.changedTouches[0] 获取坐标
- 安全区域（statusBar、navigationBar）需手动适配：抽屉头部要加
padding-top: env(safe-area-inset-top)，否则文字被刘海遮挡
想换主题或加多级菜单？别硬改 uni-draweruni-drawer 本身只负责“抽出来关回去”，不处理菜单渲染逻辑。强行往里面塞 v-for + children 展开逻辑，容易让组件变重、手势卡顿，也违背单一职责。
- 多级菜单建议用独立组件（如
tri-side-nav）嵌入抽屉内容区，它支持分组、手风琴、主题切换，且已做鸿蒙手势优化
- 主题切换不要依赖
uni-drawer 的 dark 属性（它只影响自身背景色），而是通过全局 CSS 变量 + watch 监听 $u.colorMode 或 prefers-color-scheme 动态切类名
- 如果需要“点击菜单项后自动收起抽屉”，别在
@click 里直接调 this.$refs.drawer.close()，而应 nextTick 包裹，否则 H5 下动画中断
manifest.json 中开启 "softKeyboard": "adjustResize"，否则抽屉弹出时软键盘顶起界面会导致布局错乱touchstart / touchmove 的事件对象缺少 touches[0].clientX，建议改用 event.changedTouches[0] 获取坐标padding-top: env(safe-area-inset-top)，否则文字被刘海遮挡uni-draweruni-drawer 本身只负责“抽出来关回去”，不处理菜单渲染逻辑。强行往里面塞 v-for + children 展开逻辑，容易让组件变重、手势卡顿，也违背单一职责。
- 多级菜单建议用独立组件（如
tri-side-nav）嵌入抽屉内容区，它支持分组、手风琴、主题切换，且已做鸿蒙手势优化 - 主题切换不要依赖
uni-drawer的dark属性（它只影响自身背景色），而是通过全局 CSS 变量 +watch监听$u.colorMode或prefers-color-scheme动态切类名 - 如果需要“点击菜单项后自动收起抽屉”，别在
@click里直接调this.$refs.drawer.close()，而应nextTick包裹，否则 H5 下动画中断
鸿蒙和小程序对 touch 事件拦截更激进，抽屉的手势关闭逻辑最容易在这里翻车——宁可少一点“滑动即关”，也要先保证点按操作 100% 可控。
