9

Hello I was wondering before I made something my self if ionic has something like scrollable tabs. I was looking and seen it in the fitrpg app which was made with ionic but I didn't know if it was custom or not. I'm going to use it for a list like in fitrpg and would have several sections to sort the list differently like top rated, newest, etc. I also saw ionics slide box and thought I could implement it with that if I made a fancy header my self. But I figured I'd find out if someone made a package for this or has any advice that would be useful if I have to do it myself. Also here is a picture from fitrpg of what im trying to achieve. I need tabs like All Active and Completed where you can swipe between them.

enter image description here

4

3 回答 3

4

该库似乎可以满足您的需求：

https://github.com/saravmajestic/ionic/tree/master/tabbedSlideBox

于 2014-10-18T07:30:39.043 回答
2

它必须具有功能并且已经在社区中请求。我也在等待可滚动的标签，似乎正在考虑中！可能会在未来即将发布的版本中提供。请参阅Github 问题和Trello。

于 2015-07-05T16:21:47.893 回答
1

我使用了 html 和 css 来使这些选项卡可滚动。我想提一下，可滚动标签功能不可用。然而，我想出的下面的解决方案对我来说很神奇。

您可以继续配置其中包含无限数据的选项卡数组。

注意：在开发过程中您将无法在浏览器上滚动，但是一旦您安装了应用程序，它就会在滑动时工作......也适用于离子视图

该部分的 HTML 代码：

<ion-header-bar class="bar bar-header row" align-title="center">
               <!-- here goes your header code -->
</ion-header>
<ion-nav-view>
    <ion-content>
              <!-- here ur templates will be injected -->
    </ion-content>   
</ion-nav-view>

<ion-footer-bar>
   <div class="auFooter">
              <div class="auFooterItem" ng-repeat="tab in tabs" id="tab{{tab.id}}" ng-class="{'IAmActive':tab.id===activeTabId}" ui-sref="{{tab.url}}" ng-click="change_tab({{tab.id}})">
                   <p>
                            <img src="{{tab.imageurl}}">
                    </p>
                    <p>
                       {{tab.title}}
                    </p>
              </div>
          </div>

</ion-footer-bar>

相同的 CSS 注意：我将 SASS 用于我的 css 结构：

.pad0{
    padding: 0 !important;
}
.padTop0{
    padding-top: 0 !important;
}
.padBottom0{
    padding-bottom: 0 !important;
}
.padLeft0{
    padding-left: 0 !important;
}
.padRight0{
    padding-right: 0 !important;
}



ion-footer-bar{
    @extend .pad0;
    .auFooter{
        height: inherit;
        background-color: #000F22;
        padding: 0;
        width: 100%;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-flow:row;
        position:absolute;
        left: 0;
        overflow-x: scroll;
        .IAmActive{
                background-color: #E68C00 !important;
        }
        .auFooterItem{
           padding: 10px;
           cursor: pointer;
           color:white;
           overflow: auto;
           font-size:22px;
           background-color: #000F22;//crimson;
           border:1px solid #000710;
           flex:1;
           -webkit-flex:1;
           text-align:center;
           min-width:200px;
            p{
                margin-bottom: 0px;
                font-size: 16px;
                img{
                    height: 34px;
                }
            }
        }
        &::-webkit-scrollbar{
            display: none;
        }
    }

}

.bar{
        height: 60px;   
}
.bar-footer{
        height: 90px;
}

用于更改选项卡的 Javascript：

$scope.activeTabId='tab1';
$scope.change_tab=function(tabid){

            $('#tab1').removeClass("IAmActive");
             if($scope.activeTabId!==tabid){
                $scope.activeTabId=tabid;
             }

}


 $scope.initTabs=function(){
                $('#tab1').addClass("IAmActive");
  }

 setTimeout($scope.initTabs,500);

标签的示例 json 

$scope.tabs = [
                    {
                        "id":1,
                         "title" : 'Gallery',
                         "iconoff":'ion-ios-photos',
                         "iconon":'ion-ios-photos',
                         "url":'home',
                         "tabname":"tab-dash",
                         "imageurl":"img/icons/gallery.png"
                    },
                    {
                        "id":2,
                         "title" : 'Customer Enquiry Form',
                         "iconoff":'ion-android-contact',
                         "iconon":'ion-android-contact',
                         "url":'cenquiry',
                         "tabname":'tab-chats',
                         "imageurl":"img/icons/customer_enquiry.png"
                    },
                    {
                        "id":3,
                         "title" : 'Top 5',
                         "iconoff":'ion-android-star-half',
                         "iconon":'ion-android-star-half',
                         "url":'top5',
                         "tabname":'tab-top5',
                         "imageurl":"img/icons/top-5.png"
                    }
];
于 2016-01-05T11:05:44.623 回答