Question

我在使用Ionic选项卡应用程序时遇到问题。在修改我的代码的某些时候，我注意到我的底部标签栏被切断，但是我不确定它在哪个过程中发生了，我无法确定它是如何发生的。它似乎没有任何CSS样式，因为我已经明确地将边界/填充/边距设置为0并且仍然存在此问题。我也尝试抬起标签，看看顶部的样子，我注意到标签栏上方有一个白条。我不知道那是什么，或者它是如何到达那里的，我认为这是我的问题。它发生在Android，IOS设备和SIM以及Web浏览器上。似乎标题标题也没有通过。我确定这些都是相关的，但我不知道要修复什么，因为我检查了所有文件。

的index.html

<body ng-app="cspapp">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-positive">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view></ion-nav-view>
</body>

tabs.html

<ion-tabs class="tabs-icon-only tabs-positive">

    <ion-tab title="Home" icon="ion-home" ui-sref="tabs.home">
        <ion-nav-view name="home-tab"></ion-nav-view>
    </ion-tab>

</ion-tabs>

app.js

var app = angular.module('cspapp', ['ionic', 'ionic.service.core', 'ionic.service.analytics', 'ngCordova',
    'cspapp.controllers', 'cspapp.services'])

.run(function($ionicPlatform, $ionicAnalytics) {
    $ionicPlatform.ready(function () {

        //Start analytics service
        //$ionicAnalytics.register();

        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        /*
        if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
          cordova.plugins.Keyboard.disableScroll(true);

        }
        if (window.StatusBar) {
          // org.apache.cordova.statusbar required
          StatusBar.styleLightContent();
        }
        */
    });
})

.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider
      .state('tabs', {
          url: "/tab",
          abstract: true,
          templateUrl: "templates/tabs.html"
      })
      .state('tabs.home', {
          url: "/home",
          views: {
              'home-tab': {
                  templateUrl: "templates/home.html",
                  controller: 'HomeTabCtrl'
              }
          }
      })
      .state('tabs.resources', {
          url: "/resources",
          views: {
              'home-tab': {
                  templateUrl: "templates/additionalresources.html",
                  controller: "AdditionalResourcesCtrl"
              }
          }
      })
      .state('tabs.gmetrics', {
          url: "/gmetrics",
          views: {
              'home-tab': {
                  templateUrl: "templates/global-metrics.html",
                  controller: "GlobalMetricsCtrl"
              }
          }
      })
      .state('tabs.gfeed', {
          url: "/gfeed",
          views: {
              'home-tab': {
                  templateUrl: "templates/global-feed.html",
                  controller: "GlobalFeedCtrl"
              }
          }
      })
      .state('tabs.googleforms', {
          url: "/googleforms",
          views: {
              'home-tab': {
                  templateUrl: "templates/googleforms.html",
                  controller: "GoogleFormsCtrl"
              }
          }
      })
      .state('tabs.social', {
          url: "/social",
          views: {
              'home-tab': {
                  templateUrl: "templates/social.html",
                  controller: "SocialNetworkCtrl"
              }
          }
      });
    /*
    .state('tabs.chapters', {
        url: "/chapters",
        views: {
            'home-tab': {
                templateUrl: "templates/chapters.html"
            }
        }
    });
    */
    $urlRouterProvider.otherwise("/tab/home");

})

.config(['$ionicConfigProvider', function ($ionicConfigProvider) {


    $ionicConfigProvider.tabs.position('bottom'); //other values: top

}]);

Answer 1

我在git hub更新了您的代码而没有任何错误，并且它对我有用，如果您有任何问题，请查看并回复

标签栏切断Ionic Cordova应用程序

1 个答案: