我目前面临一些与 ionic 标签和 float 标签概念相关的问题。
目前正在使用 ionic 框架..我正在构建一个移动应用程序,我希望在页面滚动到选项卡所在的位置后,tabs fixed below header是。我在 ion-content 中保留了 ion-tabs。
获得滚动位置后,我添加了一个类“fixed”。 当它添加固定类时,背景变为白色(没有内容可见)并且选项卡被隐藏而不是固定在标题下方的位置。
$scope.onScroll = function() {
var scrollWidth = $(".bar".height() + $(".maincontent".height(); console.log($ionicScrollDelegate.getScrollPosition()); console.log(scrollWidth);
if (parseInt($ionicScrollDelegate.getScrollPosition().top) > scrollWidth) {
$('ion-tabs').addClass('fixed');
} else {
$('ion-tabs').removeClass('fixed');
}
};
.fixed {
left: 0;
top: 44px;
position: fixed;
z-index: 100;
width: 100%;
}
<ion-view>
<ion-header-bar class="bar bar-positive">
</ion-header-bar>
<ion-content on-scroll="onScroll()">
<div class="main-content">
<!-- some content here -->
</div>
<ion-tabs class="tabs-icon-top tabs-color-active-dark tabs-background-positive tabs-striped tabs-top">
<!-- About Tab -->
<ion-tab title="About">
<ion-nav-view>
<div>
<!--some tab content -->
</div>
</ion-nav-view>
</ion-tab>
<!--update Tab -->
<ion-tab title="Updates">
<ion-nav-view animation="slide-left-right">
<ion-view>
<ion-content scroll="false">
<!-- some other tab content -->
</ion-content>
</ion-view>
</ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-content>
</ion-view>
最佳答案
我一直在研究 ionic.css 文件,我找到了固定选项卡的解决方案,但正如我所说,您必须编辑 ionic.css 文件。
你必须编辑这个:
.tabs-top.tabs-striped
{
padding-bottom: 0;
position: fixed;
z-index: 9999
}
.tabs-top > .tabs, .tabs.tabs-top
{
top: 44px;
padding-top: 0;
background-position: bottom;
border-top-width: 0;
border-bottom-width: 1px;
position: fixed;
z-index: 9999
}
这样你就可以修复 ion-tabs,但是如果你希望 bar-header 也被修复,那么编辑这个
.bar-header
{
top: 0;
border-top-width: 0;
border-bottom-width: 1px;
position: fixed;
z-index: 9999
}
关于javascript - ionic 框架中的选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29073267/