【发布时间】：2015-11-11 16:31:49
【问题描述】：
我在使用 Ionic 标签应用程序时遇到问题。在修改我的代码的某个时候，我注意到我的底部标签栏被切断了，但是我不确定它发生在过程中的哪个位置，并且我无法确定它是如何发生的。它似乎不是任何 CSS 样式，因为我已明确将边界/填充/边距设置为 0，但仍然存在此问题。我还尝试抬起标签来查看它在顶部的样子，我注意到我的标签栏上方有一个白条。我不知道那是什么来的，也不知道它是如何到达那里的，我认为这是我的问题。它发生在 Android、IOS 设备和 SIM 以及网络浏览器上。而且似乎标签标题也没有出现。我确定这都是相关的，但我检查了所有文件后不知道要解决什么问题。
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
}]);
【问题讨论】：
-
请同时粘贴您的 HomeTabCtrl 代码
标签： cordova ionic-framework ionic