Question

离子后退按钮未出现在选项卡式视图中。我在plunker中创建了示例代码：

https://plnkr.co/edit/AjROKkHp50yyI9gHPNp8?p=preview

我已在选项卡式视图中分隔登录和注册页面

后退按钮正在显示，如果在 <ion-tab>中写下html，但如果html＆＃39; s在另一个文件中，它就会消失。

<ion-tabs class="tabs-striped tabs-top">
      <ion-tab title="Login" href="#/page2/signin">                
       //<ion-nav-view name="page2-signin"></ion-nav-view>//
       <ion-content has-bouncing="false">
         <h2>login page</h2>
       </ion-content>           
      </ion-tab>
      <ion-tab title="Rigister" href="#/page2/signup">
        <ion-nav-view name="page2-signup"></ion-nav-view>
      </ion-tab>        
    </ion-tabs>

Answer 1

在引用您的plunker代码后，您似乎正在添加标签并引用该页面，如下面的代码。

<ion-nav-view name="page2-signin"></ion-nav-view>

您的index.html文件已包含导航栏。因此，如果您尝试在选项卡中显示其他页面，则不会显示导航栏上的后退按钮，因为您已添加了导航栏。

我对您的代码进行了一些更改。首先在index.html文件中我注释掉了添加导航后退按钮的代码。像下面的代码。

<ion-nav-bar class="bar-positive nav-title-slide-ios7" align-title="center">
    <!--<ion-nav-back-button class="button-icon ion-arrow-left-c">-->
    <!--</ion-nav-back-button>-->
</ion-nav-bar>

接下来，我在page2.html文件中明确添加了导航按钮。

<!-- Adding navigation bar on top of page2 with a back button-->
    <ion-nav-bar class="bar-positive nav-title-slide-ios7" align-title="center">
       <ion-nav-buttons side="primary">
            <button class="button-icon ion-arrow-left-c" ng-click="myGoBack()">
                Page 1
            </button>
        </ion-nav-buttons>
    </ion-nav-bar>

    <ion-view  view-title="Login" align-title="left"  cache-view="false" class="logincontent">
      <ion-content scroll="false">
        <ion-tabs class="tabs-striped tabs-top">
          <ion-tab title="Login" href="#/page2/signin">                
            <ion-nav-view name="page2-signin"></ion-nav-view>
          </ion-tab>
          <ion-tab title="Register" href="#/page2/signup">
            <ion-nav-view name="page2-signup"></ion-nav-view>
          </ion-tab>        
        </ion-tabs>     
        </ion-content>
    </ion-view>

现在，在您的script.js文件中，在显示page2模板后添加此行。

.state('page2', {
    url: '/page2',
    templateUrl: 'page2.html',
    controller: 'Page2Ctrl' // Adding this line which will invoke controller

  })

Atlast在script.js文件中添加控制器功能

.controller('Page2Ctrl', function($scope,$state,$rootScope) {
  $scope.myGoBack = function(){
     $state.go('page1');
  }
})

现在，您将单击我们在page2.html中明确添加的后退按钮，上面的函数将被调用，它将状态再次推回到page1。希望这会帮助你...快乐的编码。：）

离子后退按钮不出现在选项卡视图中

1 个答案: