Question

这就是应用程序在离子指令方面的结构。

以下是index.html body 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">

请注意， ion-content 指令包含 has-tabs 类。

在 iOS 上运行此功能时，标题和标签项之间的一切顺利，这意味着内容适合列表的顶部和底部，如下面的屏幕截图所示：

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

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

所以，我尝试删除 has-tabs 类，认为离子可能会自动处理此问题，根据平台，但内容仍然没有适合。

以下是没有 has-tabs 类的 iOS 和 android 屏幕截图。 请注意，在下面的两个屏幕截图中，列表一直滚动到顶部

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

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

所以问题是：

我缺少什么才能在两个平台上正常工作，以及所有平台（我正在考虑使用Windows Phone），因此 ng-if 的解决方案与platform = android或ios结合使用（或Windows手机或上帝知道将来会有什么其他平台）不够通用恕我直言？
使用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>

此codepen显示了如何设置标签。 http://codepen.io/ionic/pen/odqCz

这是主要问题，内容不知道它在标签视图中，所以它不知道它应该调整大小。

Answer 2

就我而言，我忘了在<ion-view>之后和<ion-tab>之前添加<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>

ion-tabs：更换平台时内容不适合

2 个答案: