97

我创建了一个简单的 ionic-tabs，在屏幕顶部显示我的图标。我试图将其包装在 ionic-footer-bar 中，以便将其放置在屏幕底部但没有成功。当我这样做时，标签消失了。我应该如何完成我想要的外观？

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

9 回答 9

175

由于 Ionic 的beta 14 ( http://blog.ionic.io/the-final-beta/ )，现在有一些配置变量默认为其平台值，这意味着它们将尝试根据平台运行他们是建立在。在选项卡的情况下，iOS 默认显示在底部，Android 显示在顶部。

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

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

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

}]);

您可以在此处查看文档

于 2015-01-13T05:24:40.967 回答
65

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

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

希望这会有所帮助。

于 2015-06-05T19:29:22.700 回答
9

Ionic 2 的更新（更简洁/改进的语法）：

在 app.js 中：

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

查看配置

于 2016-04-01T18:23:26.403 回答
7

把它放在你的 app.js 中就可以了。

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

Ionic 会自动将平台配置考虑在内，以调整要使用的过渡样式以及选项卡图标应该显示在顶部还是底部。

例如，在选项卡的情况下，iOS 默认显示在底部，Android 显示在顶部。

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

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

于 2016-11-18T10:00:22.190 回答
5

在 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');

});
于 2018-02-05T04:12:50.453 回答
3

如何在 Ionic 2 中将离子标签放置在屏幕底部

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

在 app.ts 中：

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

见配置

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

在 app.ts 中：

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

配置

于 2016-07-19T20:54:32.377 回答
2 
myapp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);
于 2016-12-14T09:17:37.947 回答
2

Ionic 2 和 Ionic 3+ 的更新：

您有 2 种方法来更改标签栏位置：

方法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'
    })
  ]
})

查看文档

于 2017-09-22T04:03:59.260 回答
0

尝试这个

<ion-footer><ion-tabs> <ion-tab tabTitle="Return"></ion-tab> </ion-tabs></ion-footer>

于 2022-01-14T06:53:31.033 回答