離子可滾動標簽

Question

你好，我想知道在我做自己的事情之前，如果離子具有類似滾動標簽的東西。 我正在使用離子制作的fitrpg應用程序中查看並看到它，但我不知道它是否是自定義的。 我將把它用於像fitrpg這樣的列表，並且有幾個部分可以對列表進行不同的排序，例如最高評級，最新等等。我還看到了離子滑動盒，並且我認為如果我做了一個幻想，我可以實現它標題我的自我。 但是我想我會發現有人為此制作了一個包裹，或者如果我必須自己做的話，有任何建議是有用的。 這里還有一張來自fitrpg的圖片，展示了我想要實現的目標。 我需要像所有活動和已完成的標簽，您可以在它們之間滑動。

Answer 1

這個庫似乎可以滿足您的需求：

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

Answer 2

它必須具備功能，並在社區中提出要求。 我也在等待可滾動的標簽，似乎正在考慮之中！ 可能會在未來即將發布的版本中提供。 見Github問題和Trello 。

Answer 3

我使用了html和css來使這些選項卡可滾動。 我想提一下，滾動選項卡功能不可用。 然而，我想出的解決方案對我來說很有意義。

您可以繼續配置tabs數組，其中包含無限數據。

注意：在開發過程中，您將無法在瀏覽器上滾動，但只要您安裝應用程序，它就可以在滑動中工作...也可以在離子視圖中工作

該部分的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"
                    }
];