我创建了一个简单的ionic-tabs，将我的图标显示在屏幕顶部。我试图将其包裹在离子脚注栏中，以使其无法放置在屏幕底部。当我这样做时，这些标签会消失。我应该如何完成自己想要的外观？

<ion-footer-bar>
    <ion-tabs class="tabs-icon-only tabs-stable">
    ...
    </ion-tabs>
</ion-footer-bar>

由于Ionic 的beta 14（http://blog.ionic.io/the-final-beta/），现在有一些配置变量默认为其平台值，这意味着它们将尝试根据平台进行操作他们建立在。对于标签页，对于iOS，默认值是显示在底部，而Android显示在顶部。

您可以通过tabs.position在$ionicConfigProviderconfig函数内的中设置函数，轻松地“硬设置”所有平台的位置，如下所示：

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

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

}]);

您可以在此处查看文档

要将ionicFramework标签放置在android设备的屏幕底部，只需打开app.js文件，然后在angular.module下添加以下代码行：

.config(function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom');
})

希望这会有所帮助。

Ionic 2的更新（更干净/改进的语法）：

在app.js中：

@App({
  ...
  config: {
    tabbarPlacement: 'bottom',
  }
})

请参阅配置

将其放在app.js中即可完成工作。

.config(function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom');
})

Ionic会自动考虑平台配置，以调整诸如使用哪种过渡样式以及选项卡图标应显示在顶部还是底部之类的内容。

例如，对于选项卡，对于iOS，默认设置是显示在底部，而Android显示在顶部。

注意1：应该注意的是，当平台不是iOS或Android时，它将默认为iOS

注意2 ： 如果您使用桌面浏览器进行开发，它将采用iOS默认配置

在app.js文件中，您需要将$ ionicConfigProvider注入.config模块，并添加$ ionicConfigProvider.tabs.position（'bottom'）

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

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

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })
.
.
.
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

});

如何在Ionic 2中将离子选项卡放置在屏幕底部

对于当前版本的ionic 2.0.0-beta.10。

在app.ts中：

ionicBootstrap(MyApp, [], {
  tabbarPlacement: "bottom"
});

请参阅配置

对于即将发布的离子2.0.0-beta.11

在app.ts中：

ionicBootstrap(MyApp, [], {
  tabsPlacement: "bottom" 
});

设定档

Ionic 2和Ionic 3+的更新：

您可以通过以下两种方法更改标签栏的位置：

方法1：使用的tabsPlacement专有名词<ion-tabs>

<ion-tabs  tabsPlacement='bottom' >
    <ion-tab [root]="rootTab" tabTitle="Home"></ion-tab> 
</ion-tabs>

方法2：更改配置 app.module.ts

@NgModule({
  imports: [
    IonicModule.forRoot(MyApp, {
      tabsPlacement : 'bottom'
    })
  ]
})

查看文件

myapp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);