vue中导航栏的显示和隐藏

Posted 2023-04-30

参考技术A 要求在进入登录注册页面的时候底部导航栏不显示

解决方案（大佬提醒的）：
直接在底部导航栏组件内部，判断当前路由是不是登陆注册页来控制组件是否显示

也不知道这两个方法哪个更好，但是第一个确实简单很多

-----------------------------------------------------2020.02.28 11:17 之前 版

而底部导航栏是直接在App.vue根组件中使用的，登陆页也是通过路由显示在根组件上的，所以登录页没法传值直接控制底部导航栏的显示。

那么我能通过什么解决了，想到了！用vuex状态管理，开工！

我这边把mutations，actions，getters单独抽离出来方便后续修改

大家可能觉得麻烦不过对于中大型项目而言，把模块独立出来，可以提高开发项目的效率哦！

单独抽离的mutations

单独抽离的mutations_type

这样就搞定了！

ok，结束。

导航栏状态，显示和隐藏底部导航栏

【中文标题】导航栏状态，显示和隐藏底部导航栏

【英文标题】：navigation bar states, showing and hiding the bottom nav bar

【发布时间】：2016-03-24 00:08:56

【问题描述】：

请记住以下问题，我仍然是 iOS 菜鸟。

所以我了解如何隐藏/显示/重新着色导航栏等等。我的下一个挑战是有些屏幕需要导航栏，而有些则不需要。

当我的应用启动时，我将导航栏隐藏，然后用户可以单击注册或登录（这两个屏幕都有导航栏）。

所以这些屏幕都有显示导航栏的代码，而第一个（欢迎屏幕）有隐藏导航栏的代码。

这里的问题是：为什么我第一次启动我的应用程序时，导航栏不在那里，但是当我去注册/登录然后点击返回按钮返回到欢迎页面（初始页面）时那么导航栏仍然存在，即使我隐藏它的代码在viewDidLoad 方法中？ 我怎样才能解决这个问题？

【参考方案1】：

您可以尝试将隐藏导航栏的逻辑移至 ViewWillAppear 方法，您只需在 View Controller 类中重写它即可。

另外，我建议使用单独的视图控制器来处理您的登录/注册屏幕，并且只在需要它们的地方使用导航栏。您必须在故事板中使用常规屏幕创建视图控制器，并将需要标签栏的屏幕嵌入导航控制器中，然后您可以从常规视图控制器转移到包含标签的导航控制器中。

希望对你有帮助

【讨论】：

好吧，我的问题可能有更好的解决方案...查看当前和最初我的计划是使用滑动手势导航到注册屏幕（这很好），但问题是是不是对用户来说不完全直观……有什么想法吗？

您可以通过使用页面视图控制器来实现这一点，只需更改动画类型，这样看起来就不会像在翻页。我在我的一个应用程序中出于完全相同的目的使用了它，但我已经通过垂直滚动完成了它，只需添加一个小标签“滑动注册”或类似的东西。