Содержимое ионной вкладки перекрывается навигационной панелью и панелью вкладок

Я пытаюсь заставить вкладки работать, но независимо от того, что я пытаюсь, я не могу получить содержимое вкладки, которое будет отображаться под панелью вкладок. Вот мое мнение:Содержимое ионной вкладки перекрывается навигационной панелью и панелью вкладок

<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 на все, но это не помогло.

Примечание: Я настроил вкладки, чтобы всегда быть на вершине, как это (как в Ионическом документы):

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

Я использую Ионные 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>

Однако содержание вкладки пусто по какой-то причине :(

источник

2016-12-22 iosdude

Вы не оберточная с <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 будет состоять из вкладок tmeplate только, поэтому, когда вы добавляете больше это довольно легко (я добавляю обратно кнопки для каждой вкладки, так как каждый из них имеет свою собственную историю стека), exmaple:

<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>

Посмотрите на документацию Ионные по структурированию, маршрутизации и навигации here.Это очень важно понимать, как работают представления.

EDIT 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'); 

});

источник

2016-12-22 17:50:29 Sam5487

Спасибо! Организация вкладок, как вы описали, фактически решила проблему, мне больше не нужно устанавливать верхнее смещение для содержимого вкладки. Странно, что я не нашел этого нигде в официальных документах, это поведение описано где угодно? Я должен быть слеп или что-то в этом роде. – iosdude

Ну, это было немного преждевременно, это еще не совсем работает: по какой-то причине содержимое вкладки не отображается, и я не вижу никаких ошибок. Вы знаете, что может быть неправильно? – iosdude

Является '' ion-nav-view name = "currentBookings"> 'или как вы его назвали в вашей конфигурации' stateProvider/urlProvider'? Похоже, что он просто не отображает '' ребенка с '' tab – Sam5487

Try добавить язычок ионов внутри тега <ion-nav-view>:

<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>

источник

2016-12-22 16:57:27

Спасибо, это то, что я делаю сейчас, однако содержимое вкладки пусто по какой-то причине. Я обновил исходный вопрос с некоторой информацией. Вы знаете, что может быть причиной этого? – iosdude

Содержимое ионной вкладки перекрывается навигационной панелью и панелью вкладок

ответ

Смежные вопросы