且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Onsen UI分页:导航器和tabbar

更新时间:2023-09-12 11:39:10

由于没有具体问题我会尽力澄清一下你在那里使用的导航模式。

Since there is no specific question I will try to clarify about the navigation patterns you are using there.

<!-- Navigator as root element -->
<ons-navigator>
    <ons-page>
        <ons-tabbar>
            <ons-tab>...</ons-tab>
            <ons-tab>...</ons-tab>
        </ons-tabbar>
    </ons-page>
</ons-navigator>

你有一个 ons-navigator 作为你的应用程序的根,然后你有一个 ons-tabbar 作为一个孩子。这意味着当您尝试使用父导航器进行导航时,您将在当前子项(标签栏)上推送另一个子项(页面),因此您将不会再看到标签栏(甚至不是工具栏,除非你在每个页面中添加一个新的工具栏),直到你再次推它或删除它上面的所有兄弟。此外,由于您只有一个导航器,因此您的所有页面都将存储在同一页面堆栈中。这意味着您无法在两个不同的分支中分隔Tab1和Tab2工作流:如果您在Tab1中重置了TopTo,Tab2也将被重置。

You have an ons-navigator as the root of your app and then you have an ons-tabbar as a child. This means that when you try to navigate using the parent navigator, you will push another child (a page) over the current child (the tabbar), so you won't see the tabbar anymore (not even the toolbar unless you put a new one in every page) until you push it again or delete all its siblings over it. Also, all your pages will be stored in the same page-stack since you only have one navigator. This means that you cannot separate Tab1 and Tab2 workflows in two different branches: if you resetToPage in Tab1, Tab2 will be also reset.

如果您知道这完全没问题它是你真正想要做的。这取决于你需要什么。

This is completely fine if you are aware of it and is what you really want to do. It depends on what you need.

<!-- Tab Bar as root element -->
<ons-tabbar>
    <ons-tab>
        <ons-navigator>...</ons-navigator>
    </ons-tab>
    <ons-tab>
        <ons-navigator>...</ons-navigator>
    </ons-tab>
</ons-tabbar>

另一种不同的方法,也许更常见的方法是让 ons- tabbar 作为项目的根目录,并定义一个 ons-navigator 作为每个 ons-tab的子项您需要进一步导航的地方。像这样您的标签栏将始终可见,因为您使用导航器更改的内容并非所有内容,而只是特定 ons-tab 的内容>。每个选项卡都有自己的工作流程存储在不同的页面堆栈中,完全独立于其他页面。

Another different approach, and perhaps more common, is to have the ons-tabbaras the root of the project and define one ons-navigator as a child of every ons-tab where you need further navigation. Like this your tabbar will always be visible since what you are changing with the navigators is not all the content but just the content of a specific ons-tab. Every tab will have its own workflow stored in a different page-stack, totally independent from the others.

正如我之前所说,这实际上取决于你需要什么应用程序。例如,您可以使用许多选项卡,例如设置,关于等,这些只是一页浏览,然后只有一个选项卡中的导航器与真实应用程序。

As I said before, it really depends on what you need for you app. You could have, for example, many tabs for things like "settings", "about", etc. that are just one-page views and then a navigator in only one tab with the real app.

如果您的疑虑现在得到澄清,请告诉我!

Let me know if your doubts are clarified now!