【发布时间】：2023-04-21 15:17:02
【问题描述】：
这就是应用程序在离子指令方面的结构。
下面是 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>
那么，ion-view的内容来自文件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 类，认为 ionic 可能会根据平台自动处理此问题，但内容仍然没有适合。
这是没有 has-tabs 类的 iOS 和 android 屏幕截图。 请注意，在下面的两个屏幕截图中，列表一直滚动到顶部
iOS：导航栏与最上面一行重叠！
android：导航栏与最上面一行重叠！
所以，问题是：
- 我缺少什么让它在两个平台上正常工作，可能是所有平台（我在想 Windows Phone），所以 ng-if 的解决方案结合了平台 = android 或 ios （或 windows phone 或天知道将来会有什么其他平台）不够通用恕我直言？？？
- 使用 Ionic 处理这种跨平台的正确通用方法是什么？
【问题讨论】：
标签： android ios tabs ionic-framework cross-platform