App 底部导航 中间加号

需求：点击 App 底部导航 中间加号，在当前页面（不跳转路由的情况下），展开弹出层。

当前技术：HBuilderX（版本 3.1.9.20210413）、uniapp、uView（版本 1.8.2）

---

查看 uniapp 官方文档，在 配置项列表 的 tabBar 中，就有设置底部 tab 的方法。但是按照步骤一走后实现的是点击底部导航栏后跳转路由，想要实现点击底部导航菜单，并在当前路由打开弹出框，得细看文档…

以下是文档给出的几种说法：

---

1. 页面生命周期

如果你的项目要求发布在 App 应用市场，这种办法就可以了。
但是我的项目考虑到上架苹果应用市场的最坏结果（上架不了），所以最坏在 H5 端上线，所以我要兼容 H5，我就无法使用此方法解决需求了。

2. minbutton （亲测可行！！！）

监听点击事件

文档写着只兼容 App，但我运行在 H5，依旧可以！【惊喜╰(°▽°)╯】
我就选用 minbutton 完成了需求。

思路：

1. 将弹出层抽取为公共组件，在每个主页面都引入；
2. 通过入口文件 App.vue 中的 onLaunch 钩子里，使用 uniapp 提供的中间按钮点击事件 uni.onTabBarMidButtonTap；
3. 通过 vueX 动态控制弹出层的展示和关闭。

项目源码

3. uView 中的 Tabbar 底部导航栏

按照官方代码走一遭，你会发现它依旧是跳转路由。PASS…

4. 插件

此插件点击 + 号后，会跳转路由，不满足我的需求。PASS…

5. 自定义 tabbar

自定义 tabbar 直接是顶部导航了。PASS…