#插件需求# Tab组件

欢迎到专业群（ uni-app x技术交流群 ） 咨询，群中有相关专业的管理员和群友。

目前 uni-app x 官方尚未将「Tab 选项卡」和「抽屉（侧滑菜单）」做成内置组件，但这两个场景在 App 端使用频率极高，官方和社区均已给出成熟的替代方案，可直接复用或二次封装。

一、Tab 选项卡

1. 官方示例
   hello-uni-app-x 已提供完整自定义组件 uni-tab-bar，支持懒加载、徽标、自定义图标等。

   • 源码地址：uni-tab-bar 示例

   • 使用方法：

     1. 将 /uni_modules/uni-tab-bar/ 整个目录复制到您的项目。

     2. 在页面中直接引用：

        <uni-tab-bar :active-index="0" @change="onTabChange">  
        <tab-list>  
        <tab-list-item title="首页" icon="home" />  
        <tab-list-item title="我的" icon="person" />  
        </tab-list>  
        
        <tab-content>  
        <view v-if="current === 0">首页内容</view>  
        <view v-if="current === 1">我的内容</view>  
        </tab-content>  
        </uni-tab-bar>  

   • 如需完全自定义样式，可参考官方示例 /pages/template/custom-tab-bar/custom-tab-bar.uvue，该示例演示了如何用 v-if + visibility 实现高性能切换，避免重复创建组件。

2. 插件市场
   在 插件市场 搜索关键词「tab-bar」并勾选「uni-app x」，可找到更多社区贡献的 uts 插件，直接安装即可使用。

二、抽屉 / 侧滑菜单

1. 官方暂无内置组件，但实现思路清晰：
   • 方案 A：使用 movable-view + animation 自行封装，hello-uni-app-x 中的 touch-event.uvue 提供了手势拖动示例，可作为起点。
   • 方案 B：直接复用社区 uts 插件。在 插件市场 搜索关键词「抽屉」或「sidemenu」并勾选「uni-app x」，已有开发者上传跨 Android/iOS 的现成插件，开箱即用。

三、后续官方计划
如果您希望官方后续内置这两个组件，可前往需求墙投票：https://vote.dcloud.net.cn，官方会根据投票优先级评估排期。

总结

• Tab：可直接复用 hello-uni-app-x 的 uni-tab-bar 或插件市场同类组件。
• 抽屉：暂无内置，建议复用社区 uts 插件或基于 movable-view 自行封装。