往期文章推荐： [软考小工具重磅更新啦！最好用的软考刷题工具](https://juejin.cn/post/7412490227550765083) [uni-app 高效开发小程序技巧：自动化切换环境变量](https://juejin.cn/post/7413314085709627432) [JavaScript 访问者模式：打造高扩展性的对象结构](https://juejin.cn/post/7412906006537388071) ## 一. 前言我之前使用 `uni-app` 和 `uniCloud` 开发了一款软考刷题应用，在这个应用中，我使用了抽屉组件来实现一些功能，切换题库，如下图所示： ![youti1.gif](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/bf3c1e5e0a134436adc79b5bf5277ecb~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv5qKm5bel5Y6C:q75.awebp?rk3s=f64ab15b&x-expires=1769024954&x-signature=hLy14BkK%2FsPtqTDOTB7euyYDIfg%3D) 在移动应用开发中，抽屉（`Drawer`）是一种常见的界面设计模式，这个组件可以在需要侧边导航或者额外信息展示的地方使用。它允许用户通过侧滑的效果打开一个菜单或额外的内容区域。这种设计不仅能够节省屏幕空间，还能提供一种直观的交互方式。例如，在**电商应用**中，可以将购物车或分类列表放在抽屉里；在**新闻阅读器**中，可以放置频道选择等；而在**有题记**刷题软件中，我主要用于题库的选择功能。本文将介绍如何使用 uni-app 框架来实现一个简单的抽屉组件：`DrawerWindow`。文末提供完整的代码示例，让你能够轻松地在 uni-app 中实现抽屉效果。 ## 二. 实现分析 Vue 组件的结构通常由三个主要部分组成：模板（`