在Ionic Cordova應用程序中切斷了標籤欄

我遇到了Ionic標籤應用程序的問題。在修改我的代碼的某個時候，我注意到我的底部標籤欄被切斷了，但是我不確定它發生的過程在哪裏，我一直無法確定它是如何發生的。它似乎沒有任何CSS樣式，因爲我已明確地將邊框/填充/邊距設置爲0，但仍然存在此問題。我也嘗試提高標籤，看看它在頂部看起來像什麼，我注意到我的標籤欄上方有一個白色條。我不知道那是什麼或者它是如何到達那裏的，我認爲這是我的問題。它發生在Android，IOS設備和SIM以及網頁瀏覽器上。另外，標籤標題似乎也不是通過任何一個。我確定它是所有相關的，但我不知道該如何解決，因爲我已經檢查了我的所有文件。在Ionic Cordova應用程序中切斷了標籤欄

的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 

}]);

來源

2015-08-19 B-Stewart

，請複製粘貼您的HomeTabCtrl代碼也 –

我更新你的代碼git hub沒有任何錯誤的，它是爲我工作，請看看，如果您有任何疑問

來源

2015-08-19 05:19:56

謝謝回覆，我改變了我的身邊的index.html和app.js看起來像你的，我解決了我的問題。我仍然不完全確定它到底是什麼。 –

我必須再次修改你的代碼，以瞭解我所做的事情。因爲很久以前我已經完成了這項工作，到一天結束時，我會告訴你我做了什麼 –

在Ionic Cordova應用程序中切斷了標籤欄

回答

相關問題