滚动时将标签移到顶部

Question

我正在使用离子框架创建移动应用程序。我的应用程序中有3个选项卡，我需要像whatsapp这样的功能，如图所示。

1.Initial whatzapp主页

2.滚动时将标签移到顶部

这是我正在使用的观看代码：

tabs.html

  <ion-view title="myApp">
        <ion-nav-back-button class="button-clear">
            <i class="ion-arrow-left-c"></i> Back
        </ion-nav-back-button>
        <ion-tabs class="tabs-positive ">
            <ion-tab title="Home" href="#/tab/home">
                <ion-nav-view name="contact-home"></ion-nav-view>
            </ion-tab>
            <ion-tab title="Contact" href="#/tab/contact">
                <ion-nav-view name="contact-tab"></ion-nav-view>
            </ion-tab>
            <ion-tab title="About" icon="" href="#/tab/about">
                <ion-nav-view name="about-tab"></ion-nav-view>
            </ion-tab>
        </ion-tabs>
    </ion-view>

滚动时如何将标签移到顶部，whatsapp也是如此？

Answer 1

Mushin，

如果你想让它“坚持”＃39;在顶部，您需要将顶部div的css设置为position:fixed。

.tabs-positive { 
  position: fixed;
  right: 0px;
  top: 0px;
  left: 0px;
 }

Here就是一个例子。

如果你想要最好的滚动效果最顶部的条形图，在最顶部的条形图被隐藏后，调用/聊天/联系人粘在顶部，那么你将需要通过滚动监听器来完成它

Answer 2

使用$ionicConfigProvider.tabs.position('top');

将标签固定在顶部。