1

从应用程序的主菜单单击按钮后，我在显示后退按钮和平滑过渡到选项卡式页面时遇到问题。

如果我在单击按钮后重定向到简单视图：

非选项卡视图（工作正常）

  .state('dailystats', {
          url: '/daily-stats',
          views: {
              '': {
                  templateUrl: 'templates/daily-stats/daily-stats.html',
                  controller: 'DailyStatsCtrl'
              }
          }
    })

转换和后退按钮是否正确显示。

但是，如果我想在点击主页中的按钮后进入选项卡式页面，在没有动画的情况下重定向并且不可能使用选项卡式页面标题中的左后箭头图标返回主页。

如何在这些选项卡式视图中添加过渡和后退按钮？

我试图找到任何解决方案（使用脚本模板等）但没有运气。

非常感谢您的帮助。

TABBED-VIEW（不工作的动画和后退箭头）

 .state('tabplannedcalls', {
      url: "/tabplannedcalls",
      abstract: true,
      templateUrl: "templates/tabs/planned-calls.html"
    })
    .state('tabplannedcalls.list', {
          url: '/list',
          views: {
              'tab-planned-calls-list': {
                  templateUrl: 'templates/call-planning/list.html',
                  controller: 'PlannedCallsCtrl'
              }
          }
    })
    .state('tabplannedcalls.new', {
          url: '/new',
          views: {
              'tab-new-planned-call': {
                  templateUrl: 'templates/call-planning/new-planned-call.html',
                  controller: 'PlannedCallsCtrl'
              }
          }
     })

标签模板：

<ion-tabs class="tabs-positive  tabs-icon-top" animation="slide-left-right">
  <!-- List of planned calls tab-->
  <ion-tab title="List" icon="icon ion-home" href="#/tabplannedcalls/list" >
    <ion-nav-view name="tab-planned-calls-list"></ion-nav-view>
  </ion-tab>

    <!--New planned call tab-->
  <ion-tab title="New planned call" icon="icon ion-gear-b" href="#/tabplannedcalls/new">
    <ion-nav-view name="tab-new-planned-call"></ion-nav-view>
  </ion-tab>
</ion-tabs>

选项卡中包含的列表模板：

<ion-view title="Planned calls">
  <ion-content class="padding" >
      <!--WRITEOUT OVERAL STATS FOR DAYS -->
      <div class="list" ng-controller="PlannedCallsCtrl"  >
          <div class="item item-button-right" ng-repeat="plannedCallItem in plannedCalls">
              {{plannedCallItem.contact_name}}
              <button class="button button-positive">
                  <i class="icon ion-ios7-telephone"></i>
              </button>
          </div>
      </div>

  </ion-content>
</ion-view>
4

2 回答 2

0

这是一个错误，仍未解决。 https://github.com/driftyco/ionic/issues/2997

我认为解决方法是仅通过使用 css 样式来实现您自己的选项卡视图。

于 2015-08-25T00:02:37.800 回答
-1

我认为这可能会对您有所帮助。查看此（http://ionicframework.com/getting-started/）并尝试安装使用的示例标签应用程序ionic start myApp tabs。

于 2014-09-20T14:39:23.100 回答