uni-drawer不生效主因是未正确安装或注册，需运行npm install @dcloudio/uni-ui并在main.js全局注册或页面局部注册；h5端还需检查vue.config.js中transpiledependencies配置及body的overflow:hidden冲突。
uni-drawer 组件不生效？先确认是否正确引入和注册
uni-drawer 并非 uni-app 内置组件，而是 uni-ui 库中的一个扩展组件。很多开发者直接写 <uni-drawer></uni-drawer> 却没反应，根本原因是没安装或没全局/局部注册。
- 运行
npm install @dcloudio/uni-ui（或pnpm add @dcloudio/uni-ui） - 在
main.js中添加全局注册（推荐）：import { uniDrawer } from '@dcloudio/uni-ui'<br>Vue.component('uni-drawer', uniDrawer) - 或者在页面中局部注册：
import { uniDrawer } from '@dcloudio/uni-ui'<br>export default {<br> components: { uniDrawer }<br>} - 注意：H5 端需确保
vue.config.js中未禁用transpileDependencies，否则uni-ui的 ES6+ 语法可能无法转译
侧边栏内容被遮挡或滚动异常？检查层级和 body 样式
常见现象是抽屉弹出后内容看不见、文字被截断、下拉不灵敏——大概率是 z-index 或 overflow 冲突导致。
-
uni-drawer默认使用position: fixed，但若父容器设置了transform、perspective或filter，会创建新的层叠上下文，导致 drawer 被压在底层 - H5 端务必检查
body或根容器是否设置了overflow: hidden（比如某些 tabbar 或导航栏插件会自动加），这会让 drawer 内容不可滚动 - 建议显式设置 drawer 层级：
.uni-drawer { z-index: 9999 !important; } - 若 drawer 内需滚动，确保内部容器有明确高度且设
overflow-y: auto，不能依赖父级撑开
如何控制 drawer 开关？别只靠 v-model 绑定布尔值
v-model 确实能控制显隐，但实际项目中常需更精细的控制逻辑，比如点击遮罩不关闭、右滑手势关闭、路由切换时自动收起等。
-
v-model绑定的是show布尔值，但 drawer 还提供@change（状态变化时触发）、@maskClick（点击遮罩时）等事件 - 想禁用遮罩关闭？监听
@maskClick并preventDefault，同时手动控制show值 - 需要手势支持？
uni-drawer默认启用touchMove拖拽，但仅对left/right方向有效；若设为top或bottom，拖拽行为可能失效 - 页面 onShow 时想自动打开？注意
onShow触发时机早于 DOM 渲染完成，建议用$nextTick包裹show = true
真机调试时 drawer 动画卡顿或闪退？关注性能与平台差异
iOS 和 Android 对 fixed 定位 + transform 动画的渲染策略不同，尤其低端安卓机容易出现掉帧、白屏甚至 WebView 崩溃。
- 避免在 drawer 内放大量图片或复杂组件；可改用
v-if替代v-show控制内容挂载时机 - 动画时长别设太短（如
duration="100"），iOS Webview 对 300 - App 端（尤其是 iOS）慎用
mask="true"+ 半透明背景，大量 alpha 合成易触发离屏渲染，导致卡顿 - 微信小程序端注意：drawer 不支持嵌套在
<swiper></swiper>或<scroll-view></scroll-view>内部，否则 mask 层错位
drawer 的“抽”不是纯 CSS 动画，它混合了 JS 位置计算和 transition，任何外部样式干扰或 DOM 异步加载都可能让位移错乱——这点在多 tab 切换或条件渲染场景下最容易暴露。
