Question

你好我想知道，如果离子具有类似scrollable tabs的东西，我自己做了一些事情。我正在使用离子制作的fitrpg应用程序中查看并看到它，但我不知道它是否是自定义的。我将把它用于像fitrpg这样的列表，并且有几个部分可以对列表进行不同的排序，例如最高评级，最新等等。我还看到了离子slide box并认为我可以实现它，如果我我自己做了一个花哨的标题。但是我想我会发现有人为此制作了一个包裹，或者如果我必须自己做的话，有任何建议是有用的。这里还有一张来自fitrpg的图片，展示了我想要实现的目标。我需要像All Active和Completed这样的标签，你可以在它们之间滑动。

enter image description here

Answer 1

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

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

Answer 2

必须具备功能，并在社区中提出要求。我也在等待可滚动的标签，似乎正在考虑之中！可能会在未来即将发布的版本中提供。请参阅Github issue和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 for tabs

$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"
                    }
];

离子可滚动标签

3 个答案: