Ionic 选项卡无法在 Android 上正确呈现?

Posted

技术标签:

【中文标题】Ionic 选项卡无法在 Android 上正确呈现?【英文标题】:Ionic tab not get correctly rendered on Android? 【发布时间】:2016-11-04 12:55:56 【问题描述】:

ios 平台上一切正常。 为什么此选项卡无法在 android 上正确呈现?

我想用侧边菜单+标签设计。

问题是:

选项卡标题部分可见。 选项卡标题和嵌入之间不需要的间距 子视图。

我的系统信息:

科尔多瓦 CLI:6.4.0 Gulp 版本:CLI 版本 3.9.1 Gulp local:本地版本 3.9.1 Ionic 框架版本:1.3.1 Ionic CLI 版本:2.1.1 Ionic 应用程序库版本:2.1.1 ios-deploy 版本:1.9.0 ios-sim 版本:5.0.8 操作系统:Mac OS X Sierra 节点版本:v6.2.1

请查看下图,您可以清楚地看到两个平台的差异。

侧面菜单:

<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
    <ion-nav-bar class="bar-stable clsMenu">
        <ion-nav-back-button>
        </ion-nav-back-button>

        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
    </button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>

<ion-side-menu side="left" ng-controller="sideMenuCtrl">
    <ion-header-bar class="bar-stable" style="background-color:#E0E0E0">

        <img src="img/menu-top.png" />
    </ion-header-bar>
    <ion-content overflow-scroll="false">
        <ion-list>

            <ion-item menu-close href="#/app/tab">
                <i class="icon ion-help-circled"></i> Search
            </ion-item>

        </ion-list>
    </ion-content>
</ion-side-menu>

状态:

  .state('app', 
            url: '/app',
            abstract: true,
            templateUrl: 'templates/side-menu/menu.html'
        )
        // Tabs        
        .state('app.tab', 
            url: '/tab',
            views: 
                'menuContent': 
                    templateUrl: 'templates/search/tabs.html'
                
            
        )
        .state('app.tab.searchById', 
            url: '/searchById',
            views: 
                'search-by-id-tab': 
                    templateUrl: 'templates/search/searchById.html',
                    controller: 'searchCtrl'
                
            
        )
        .state('app.tab.advanceSearch', 
            url: '/advanceSearch',
            views: 
                'advance-search-tab': 
                    templateUrl: 'templates/search/advanceSearch.html',
                    controller: 'searchCtrl'
                
            
        )

tabs.html

<ion-tabs class=" tabs-color-active-calm tabs-stable">
    <ion-tab title="search By ID" ui-sref="app.tab.searchById">
        <ion-nav-view name="search-by-id-tab"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Advance Search" ui-sref="app.tab.advanceSearch">
        <ion-nav-view name="advance-search-tab"></ion-nav-view>
    </ion-tab>
</ion-tabs>

【问题讨论】:

【参考方案1】:

找到罪魁祸首

  .tabs-top > .tabs, .tabs.tabs-top 
      top: 0px;

上述style.css中的css class会导致android设备出现问题。

【讨论】:

以上是关于Ionic 选项卡无法在 Android 上正确呈现?的主要内容,如果未能解决你的问题,请参考以下文章

带有选项卡的 Angular 6 RouterLink

Ionic 2:添加新的动态选项卡后刷新选项卡视图

Ionic 2 将选项卡 NavParams 传递到选项卡

如何在 IONIC 2 应用程序中添加选项卡

Ionic 3:在指定选项卡上推送页面

Ionic - 类别的水平滚动选项卡[重复]