Question

我正在努力让标签工作，但无论我尝试什么，我都无法在标签栏下方显示标签内容。以下是我的观点：

<ion-view title="My Bookings">
  <ion-nav-bar>
    <ion-nav-back-button></ion-nav-back-button>
  </ion-nav-bar>

  <ion-tabs class="tabs-color-positive tabs-striped">
    <ion-tab title="Current Booking" ui-sref="bookings/current">
      <ion-list class="bookings has-header has-tabs-top">
        <ion-item ng-repeat="booking in bookings">
          <div class="info">
            <p class="name">{{booking.name}}</p>
            <p class="date">{{booking.date}}</p>
            <p class="time">{{booking.time}}</p>
          </div>
          <button class="cancel-button">Cancel Booking</button>
        </ion-item>
      </ion-list>
    </ion-tab>
    <ion-tab title="Past Booking" ui-sref="bookings/past"></ion-tab>
  </ion-tabs>
</ion-view

这就是它现在的样子：

我尝试在所有内容上使用has-header和has-tabs-top，但它没有帮助。

注意：我已将标签配置为始终位于此顶部（根据Ionic docs）：

.config(function($ionicConfigProvider) {
  $ionicConfigProvider.tabs.position('top');
})

我正在使用Ionic 1.3.1。

修改

这是我在Sam5487回答之后所拥有的：

.state('bookings', {
  url: '/bookings',
  templateUrl: 'templates/bookings/bookings.html'
})
.state('bookings.current', {
  url: '/bookings/current',
  templateUrl: 'templates/bookings/current_bookings.html',
  controller: 'CurrentBookingsController'
})
.state('bookings.past', {
  url: '/bookings/past',
  templateUrl: 'templates/bookings/past_bookings.html',
  controller: 'PastBookingsController'
})

bookings.html：

<ion-view title="My Bookings">
  <ion-nav-bar>
    <ion-nav-back-button></ion-nav-back-button>
  </ion-nav-bar>

  <ion-tabs id="bookings-view" class="bookings-view tabs-color-positive tabs-striped">
    <ion-tab title="Current Booking" ui-sref="bookings.current">
      <ion-nav-view name="currentBookings"></ion-nav-view>
    </ion-tab>
    <ion-tab title="Past Booking" ui-sref="bookings.past">
      <ion-nav-view name="pastBookings"></ion-nav-view>
    </ion-tab>
  </ion-tabs>
</ion-view>

current_bookings.html：

<ion-view title="Current Bookings">
  <ion-content>
    <ion-list class="bookings">
      <ion-item ng-repeat="booking in bookings">
        <div class="info">
          <p class="name">{{booking.name}}</p>
          <p class="date">{{booking.date}}</p>
          <p class="time">{{booking.time}}</p>
        </div>
        <button class="cancel-button">Cancel Booking</button>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

但是，由于某些原因，标签内容为空：（

Answer 1

您的代码中根本没有使用<ion-content></ion-content>包装，结构化可能会更好，如下所示。

<body>

    <ion-nav-view>
    </ion-nav-view>

    <ion-tabs class="tabs-color-positive tabs-striped">
        <ion-tab title="Current Booking" ui-sref="bookings/current">
            <ion-nav-view name="currentBooking">
             <ion-nav-bar>
                <ion-nav-back-button></ion-nav-back-button>
             </ion-nav-bar>
                <ion-view title="My Bookings">
                    <ion-content>
                        <ion-list>
                            <ion-item ng-repeat="booking in bookings">
                                <div class="info">
                                    <p class="name">{{booking.name}}</p>
                                    <p class="date">{{booking.date}}</p>
                                    <p class="time">{{booking.time}}</p>
                                </div>
                                <button class="cancel-button">Cancel Booking</button>
                            </ion-item>
                        </ion-list>
                    </ion-content>
                </ion-view>
            </ion-nav-view>
        </ion-tab>
        <ion-tab title="Past Booking" ui-sref="bookings/past"></ion-tab>
    </ion-tabs>

</body>

这是一个有效的codepen（注意：没有添加模拟数据，但你可以看到没有与硬编码文本重叠。在JS中添加模拟数据以便自己查看。）

但是，我建议您以不同的方式执行您的项目。

->www
   ->css 
   ->js  (controllers.js, services.js, directives.js, routes.js, app.js)
   ->lib (external libs)
   ->plugins
   ->tempaltes
      ->tabs.html
      ->currentBookings.html
      ->pastBookings.html

tabs.html将仅包含您的标签，因此当您添加更多标签时，它非常简单（我为每个标签添加了按钮，因为它们各自都有自己的堆栈历史记录），例如：

<ion-tabs class="tabs-color-positive tabs-striped">
        <ion-tab title="Current Booking" ui-sref="bookings/current">
            <ion-nav-view name="currentBookings">
              <ion-nav-bar>
                <ion-nav-back-button></ion-nav-back-button>
              </ion-nav-bar>
            </ion-nav-view>
        </ion-tab>
        <ion-tab title="Past Booking" ui-sref="bookings/past">
            <ion-nav-view name="pastBookings">
              <ion-nav-bar>
                <ion-nav-back-button></ion-nav-back-button>
                </ion-nav-bar>
            </ion-nav-view>
        </ion-tab>
        .
        .
</ion-tabs>

您当前的预订页面如下所示：currentBookings.html

<ion-view title="My Bookings">
    <ion-content>
        <ion-list class="bookings">
            <ion-item>
                <div ng-repeat="booking in bookings"">
                    <p class="name">{{booking.name}}</p>
                    <p class="date">{{booking.date}}</p>
                    <p class="time">{{booking.time}}</p>
                </div>
                <button class="cancel-button">Cancel Booking</button>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

另一页：pastBookings.html

<ion-view title="Past Bookings">
    <ion-content>
        //Your content here.
    </ion-content>
</ion-view>

查看关于结构化，路由和导航的Ionic文档here。了解视图的工作方式非常重要

。

编辑2

您的角度路由应如下所示：

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

    .state('bookings', {
    url: '/bookings',
    abstract: true,
    templateUrl: 'templates/bookings/bookings.html'
  })

  // Each tab has its own nav history stack:

  .state('bookings.current', {
    url: '/current',
    views: {
      'currentBookings': {
        templateUrl: 'templates/bookings/current_bookings.html',
      }
    }
  })

  .state('bookings.past', {
    url: '/past',
    views: {
      'pastBookings': {
        templateUrl: 'templates/bookings/past_bookings.html',
      }
    }
  });

  $urlRouterProvider.otherwise('/bookings/current');

});

Answer 2

尝试在标记<ion-nav-view>中添加ion-tab：

<body ng-app="starter">
  <!-- The nav bar that will be updated as we navigate -->
  <ion-nav-bar class="bar-positive">
  </ion-nav-bar>

  <!-- where the initial view template will be rendered -->
  <ion-nav-view>
    <ion-view>
      <ion-content>Hello!</ion-content>
    </ion-view>
  </ion-nav-view>
</body>

离线标签内容与导航栏和标签栏重叠

2 个答案: