uni-drawer 非内置组件,须从插件市场下载并正确放入/components/uni-drawer/目录;Vue 3 中需用ref().value.open()调用,width必须为String类型(如'300rpx'),nvue仅支持px,mask-click=false时需手动关闭,App端需onBackPress拦截返回键,内容超长时scroll-view需设固定高度。

uni-drawer 组件在 uni-app 中不是内置组件,必须手动引入插件;直接写 会白屏或报 Unknown custom element 错误。
uni-drawer 组件必须手动引入,不能直接用
官方文档里没说清楚这点,很多新手以为像 button 或 view 那样开箱即用。实际它属于「uni-app 插件市场组件」,需从 插件市场 下载并放入 /components/uni-drawer/ 目录。
- 下载后不要只复制
.vue文件——还要确认/components/uni-drawer/uni-drawer.vue路径存在且大小写准确(Windows 不敏感,iOS 和小程序严格区分) - Vue 3 项目中,
ref获取方式和 Vue 2 不同:Vue 2 用this.$refs.xxx,Vue 3 要用ref()声明 +.value.open()调用,否则报Cannot read property 'open' of undefined - 如果页面用了
script setup,别漏掉defineExpose(虽然uni-drawer自身不依赖它,但自定义封装时容易踩坑)
width 参数必须是 String 类型,传 Number 会失效
uni-drawer 的 width 属性类型是 String,传 :width="300"(Number)会导致抽屉宽度为 0;必须写成 :width="'300rpx'" 或 :width="'70%'"。
- 推荐统一用
rpx单位,避免 H5 和小程序表现不一致(百分比在某些安卓 WebView 下解析异常) - 如果设
width="100%",记得给父容器加position: relative,否则抽屉可能溢出或定位偏移 - nvue 页面下,
width只支持 px,不支持 rpx 或 %,需条件编译::width="uni.getSystemInfoSync().platform === 'ios' ? '320px' : '300px'"
mask-click=false 时,关闭抽屉只能靠代码触发
设了 :mask-click="false" 后,点击蒙层不会自动关闭抽屉——这是预期行为,不是 bug。但很多人误以为“点了没反应”是组件坏了。
- 务必配一个显式关闭按钮,例如:
- App 端需拦截物理返回键:
onBackPress中判断抽屉是否打开,是则调用close()并 return true,否则系统默认退出应用 - H5 端可监听
popstate实现浏览器返回键关闭抽屉,但注意uni.navigateBack不会触发该事件,得自己管理 history
滚动内容必须包一层 ,且高度要固定
抽屉里内容超长时,直接用 view + scroll-y 无效——uni-drawer 内部容器未设高度,导致 scroll-view 无法计算可滚动区域。
- 必须显式设置
,且其父级(即uni-drawer的默认 slot)不能有 flex:1 或 height:auto - 在小程序中,
scroll-view的scroll-y必须配合style="height: Xpx"才生效,100%失效,建议用calc(100vh - 88rpx)(减去导航栏高度) - 如果用了
uni-nav-bar,抽屉内容顶部会被遮挡,需加padding-top: 88rpx或用safe-area-inset-top
uni-drawer 的动画效果、mask 透明度、open/close 回调都藏在内部,没暴露 API;想深度定制(比如改滑入速度、加挤压动画),得 fork 源码改 uni-drawer.vue 里的 transition 和 transform 逻辑。











