离子:离开标签视图时没有后退按钮 [英] Ionic: No back button when navigating away from tab view

问题描述

当从选项卡式视图导航到单个页面视图时，我无法弄清楚如何让后退按钮显示.单页视图不应该有标签栏.当我制作要导航到选项卡层次结构的一部分的视图时，我可以让后退按钮出现，但这不是我想要的.

我一直在四处寻找，似乎找不到关于这个问题的帖子.我只是可能没有搜索正确的关键字.

我的设置是这样的......

标签:tab.feed、tab.friends、tab.account

其他视图:随机页面

这是我设置的路线...

.state('randompage', {网址:'/随机页'，templateUrl: '模板/randompage.html',控制器:'RandomPageCtrl'}).state('标签', {网址:'/标签'，摘要:真实，templateUrl: '模板/tabs.html',控制器:'TabCtrl'}).state('tab.feed', {网址:'/饲料'，意见:{标签页":{templateUrl: 'templates/tab-feed.html',控制器:'FeedCtrl'}}})

这是 tabs.html

<ion-tabs class="tabs-icon-top tabs-top"><!-- 提要选项卡--><ion-tab title="Feed" icon="icon ion-ios7-paper" href="#/tab/feed"><ion-nav-view name="tab-feed"></ion-nav-view></离子标签><!-- 其余的只是来自选项卡骨架--><ion-tab title="好友" icon="icon ion-heart" href="#/tab/friends"><ion-nav-view name="tab-friends"></ion-nav-view></离子标签><ion-tab title="账户" icon="icon ion-gear-b" h​​ref="#/tab/account"><ion-nav-view name="tab-account"></ion-nav-view></离子标签></离子标签>

这里是 tab-feed.html

<ion-view title="Feed"><ion-nav-buttons side="right"><a class="button button-icon ion-android-camera" href="#/randompage"></a></离子导航按钮><ion-content class="填充"><h1>饲料</h1></离子含量></离子视图>

这里是 randompage.html

<ion-view title="随机页面"><ion-content lass="padding"></离子含量></离子视图>

除了没有显示后退按钮之外，一切都可以正确导航和显示.

如果您知道任何替代解决方案、可能我做错了什么或需要更多信息，请告诉我.

谢谢！

解决方案

我也有同样的问题.通过检查源代码，ionic 设置了一个名为 root history 的默认历史堆栈，当用户浏览应用程序时，视图会从堆栈中推送和弹出.但是，选项卡视图会从此默认历史堆栈中取出，并将为其设置一个新堆栈.

<上一页>初始视图->选项卡视图->随机页面(选项卡外)|tab1 --> 嵌套视图(在选项卡中)|tab2 --> 嵌套视图(在选项卡中)

根历史堆栈:

<上一页>飞溅视图--->随机页面

标签历史堆栈:

<上一页>选项卡视图 ---> tab1 --> 嵌套视图---> tab2 --> 嵌套视图

我找不到改变这种行为的简单方法.但是我的情况有一个解决方法.我创建了一个普通的离子视图并自己组成了选项卡视图，因此不会创建新的历史堆栈.

<ion-view title="tabs"><离子内容填充=假"><离子板><ion-nav-view name="tab-content"></ion-nav-view></离子窗格><div class="tabs tabs-icon-top" style="position: absolute;bottom: 0;"><a 类="标签项"><i class="icon ion-home"></i>家</a><a 类="标签项"><i class="icon ion-star"></i>收藏夹</a><a 类="标签项"><i class="icon ion-gear-a"></i>设置</a></div></离子含量></离子视图>

然后您可以设置您的 $stateProvider 以将不同的选项卡视图加载到选项卡内容中以模仿离子选项卡的行为.当然你必须自己维护标签的活动状态.

I cannot figure out how to get the back button to show when navigating away from a tabbed view to a single page view. The single page view shouldn't have the tab bar. I can make the back button appear when I make the view I'm navigating to part of the tab hierarchy, but that's not what I want.

I've been looking around and can't seem to find a post on this issue. I just might not be searching for the right keywords.

My set up is this...

tabs: tab.feed, tab.friends, tab.account

other view: randompage

Here is my route set up...

.state('randompage', {
    url:'/randompage',
    templateUrl: 'templates/randompage.html',
    controller: 'RandomPageCtrl'
})

.state('tab', {
  url: '/tab',
  abstract: true,
  templateUrl: 'templates/tabs.html',
  controller: 'TabCtrl'
})

.state('tab.feed', {
  url: '/feed',
  views: {
    'tab-feed': {
      templateUrl: 'templates/tab-feed.html',
      controller: 'FeedCtrl'
    }
  }
})

Here is the tabs.html

<ion-tabs class="tabs-icon-top tabs-top">
    <!-- Feed Tab -->
    <ion-tab title="Feed" icon="icon ion-ios7-paper" href="#/tab/feed">
        <ion-nav-view name="tab-feed"></ion-nav-view>
    </ion-tab>

    <!-- The rest are just from the tab skeleton -->
    <ion-tab title="Friends" icon="icon ion-heart" href="#/tab/friends">
        <ion-nav-view name="tab-friends"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Account" icon="icon ion-gear-b" href="#/tab/account">
        <ion-nav-view name="tab-account"></ion-nav-view>
    </ion-tab>
</ion-tabs>

Here is the tab-feed.html

<ion-view title="Feed">
    <ion-nav-buttons side="right">
        <a class="button button-icon ion-android-camera" href="#/randompage"></a>
    </ion-nav-buttons>
    <ion-content class="padding">
        <h1>Feed</h1>
    </ion-content>
</ion-view>

Here is the randompage.html

<ion-view title="Random Page">
    <ion-content lass="padding">
    </ion-content>
</ion-view>

Everything navigates and shows correctly except the back button is not showing.

Please let me know if you know of any alternate solution, possibly what I may be doing wrong, or need more information.

Thanks!

解决方案

I have the same issue. By check the source code, ionic sets up an default history stack named root history, views are pushed and popped from the stack as user navigate through the app. However, the tab view is taken out of this default history stack and a new stack will be setup for it.

    splash view --> tab view --> random page (out of tab)
                        |
                        tab1 --> nested view (in tab)
                        |
                        tab2 --> nested view (in tab)

root history stack:

    splash view ---> random page

tab history stack:

    tab view ---> tab1 --> nested view
             ---> tab2 --> nested view

I couldn't find an easy way to change this behavior. But there's a workaround work for my case. I created a normal ionic view and composed the tab view by myself so no new history stack will be created.

<ion-view title="tabs">
    <ion-content padding="false">
        <ion-pane>
            <ion-nav-view name="tab-content"></ion-nav-view>
        </ion-pane>
        <div class="tabs tabs-icon-top" style="position: absolute;bottom: 0;">
            <a class="tab-item">
                <i class="icon ion-home"></i>
                Home
            </a>
            <a class="tab-item">
                <i class="icon ion-star"></i>
                Favorites
            </a>
            <a class="tab-item">
                <i class="icon ion-gear-a"></i>
                Settings
            </a>
        </div>
    </ion-content>
</ion-view>

then you can set up your $stateProvider to load different tab view into tab-content to mimics the ion-tabs behavior. Of course you have to maintain the active states of tabs by yourself.

这篇关于离子:离开标签视图时没有后退按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！