Question

我正在尝试在页面顶部显示离子选项卡，但没有理由不发生这种情况。我尝试明确地将$ionicConfigProvider.tabs.position('top');放入.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider)，但没有任何变化。

这是我的代码

<div class = "tabs-striped tabs-background-positive tabs-color-light">
<div class = "tabs">
<a class = "tab-item">
<i class = "icon ion-home"></i>
</a>        
<a class = "tab-item active">
<i class = "icon ion-star"></i>
</a>
<a class = "tab-item">
<i class = "icon ion-planet"></i>
</a>
</div>
</div>

Answer 1

<ion-tabs class="has-tabs-top">
  //here put your all tabs
</ion-tabs>

您可以覆盖离子css默认属性的第二种方法：

@media not all, (-webkit-min-device-pixel-ratio: 1.5), not all, (min-resolution: 144dpi), (min-resolution: 1.5dppx)
.tabs {
padding-top: 2px;
border-top: none !important;
border-bottom: none;
background-position: top;
background-size: 100% 1px;
background-repeat: no-repeat;
**position: fixed;
top: 0px;**
}

希望这会对您有所帮助。

默认情况下，离子选项卡显示在底部

1 个答案: