离子标签:更换平台时不适合的内容

Question

这是应用程序按照离子指令构建的方式。

下面是index.html主体html：

<ion-nav-bar class="bar-positive">
  <ion-nav-back-button>
  </ion-nav-back-button>        
</ion-nav-bar>     

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

<ion-tabs ng-controller="TabsCtrl" class="tabs-icon-top tabs-color-active-positive">

  <!-- Main list Tab - includes favorites and viewed videos -->
  <ion-tab title="Learn" icon-on="ion-ios-home" icon-off="ion-ios-home-outline" ng-click="setAsHome()">
  </ion-tab>

  <!-- Favorite videos Tab -->
  <ion-tab title="Favorites" icon-on="ion-ios-star" icon-off="ion-ios-star-outline" ng-click="setAsFavorite()">
  </ion-tab>

  <!-- Viewed videos Tab -->
  <ion-tab title="Viewed" icon-on="ion-ios-checkmark" icon-off="ion-ios-checkmark-outline" ng-click="setAsViewed()">
  </ion-tab>

</ion-tabs>    

​

然后，离子视图的内容来自文件list.html，它的html如下所示：

<ion-view title="Showing {{filtered.length}} videos">
  <ion-nav-buttons side="right">
      <a ng-click="openSearchModal()" class="button button-icon icon ion-search"></a> 
  </ion-nav-buttons>      
  <ion-content class="has-tabs">
      <ion-list>
      <a  ng-href="#/detail/{{video.id}}" 
          class="item item-icon-right" 
          ng-class="{ 'item-divider': video.divider }" 
          collection-repeat="video in videos" 
          item-width="100%" item-height="135px">
        <div class="row">
          <h3 class="col cat">{{video.cat}}</h3>
          <span class="col platform">{{video.platform | formatPlatform}}
          </span> 
        </div>   
        <div class="row">
          <h4 class="col col-100 title">{{video.title}}</h4>
        </div> 
        <div class="row">
          <p class="col description">{{video.desc}}</p>
        </div>
        <div class="row">
          <span class="col year">session {{video.session}}, in <span>{{video.year}}</span></span>
        </div>                             
        <i class="icon ion-chevron-right"></i>
      </a>
    </ion-list>
  </ion-content>  
</ion-view>

在此，我要强调这一点：

<ion-content class="has-tabs">

注意，离子内容指令有具有-选项卡的类。

在iOS上运行此操作时，所有内容都在标题和选项卡项之间运行良好，这意味着内容在列表的顶部和底部非常适合，如下面的屏幕快照所示：

​

​

现在出现了我遇到的一系列问题.

当我在android上启动相同的代码时，下面的屏幕截图显示，即使选项卡正确地位于顶部，底部的选项卡的空间仍然存在。看最后一行的雪佛龙，它被切断了。

​

​

因此，我试着删除has-选项卡类，认为离子型可能会自动处理这个问题，根据该平台，但是内容仍然不适合。

这里是iOS和android屏幕截图，没有有选项卡类。请注意，在下面的两个屏幕截图中，列表一直滚动到顶部的

iOS：肚脐与最上面的一行重叠！

​

​

android：导航栏与最上面的行重叠！

​

​

所以，问题是：：

1. 对于这两个平台，以及所有平台(我认为是Windows )，如果ng与平台= android或ios (或者windows或天哪)结合在一起，那么的解决方案还不够通用吗？
2. 用Ionic处理这个跨平台的合适的通用方法是什么？

Answer 1

所以你的整体结构不正确。

<ion-nav-bar class="bar-positive">
  <ion-nav-back-button>
  </ion-nav-back-button>        
</ion-nav-bar>     



<ion-tabs ng-controller="TabsCtrl" class="tabs-icon-top tabs-color-active-positive">

  <ion-tab title="Learn" icon-on="ion-ios-home" icon-off="ion-ios-home-outline">
<ion-nav-view name="home-nav"></ion-nav-view> 
  </ion-tab>

  <ion-tab title="Favorites" icon-on="ion-ios-star" icon-off="ion-ios-star-outline">
<ion-nav-view name="favorite-nav"></ion-nav-view> 
  </ion-tab>

  <ion-tab title="Viewed" icon-on="ion-ios-checkmark" icon-off="ion-ios-checkmark-outline">
<ion-nav-view name="viewed-nav"></ion-nav-view> 
  </ion-tab>

</ion-tabs>  

此代码页演示如何设置选项卡。http://codepen.io/ionic/pen/odqCz

这是主要的问题，内容不知道它在选项卡视图中，所以它根本不知道它应该调整大小。

Answer 2

在我的例子中，我忘了在<ion-tab>之后和<ion-content>之前添加<ion-content>。

如下所示：

<ion-tabs class="tabs-icon-top tabs-color-balanced">

  <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong">
    <ion-view> <!-- here -->
      <ion-content class="padding">
        <h3>Status</h3>
      </ion-content>
    </ion-view>
  </ion-tab>

  <ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" >
    <ion-view> <!-- here -->
      <ion-content class="padding">
        <h3>Chats</h3>
      </ion-content>
    </ion-view>
  </ion-tab>

  <ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear">
    <ion-view> <!-- here -->
      <ion-content class="padding">
        <h3>Account</h3>
      </ion-content>
    </ion-view>
  </ion-tab>

</ion-tabs>