Question

iOS平台上的每一件事都很好用。为什么这个标签在Android上无法正确呈现？

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

问题是：

标签页眉部分可见。
标签页眉和嵌入页面之间的不需要的间距儿童观。

我的系统信息：

Cordova CLI：6.4.0
Gulp版本：CLI版本3.9.1
Gulp local：本地版本3.9.1
Ionic Framework版本：1.3.1
Ionic CLI版本：2.1.1
Ionic App Lib版本：2.1.1
ios-deploy版本：1.9.0
ios-sim版本：5.0.8
操作系统：Mac OS X Sierra节点版本：v6.2.1

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

的 sidemenu：

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

Answer 1

找到了罪魁祸首

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

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

在Android上无法正确呈现离子标签？

1 个答案: