Ionic可滚动选项卡

Question

你好，我在做一些项目之前想知道ionic是否有类似可滚动的选项卡。我找到了fitrpg应用程序中的这个功能，但不确定它是自定义还是内置的。我将在列表中使用它，类似于fitrpg，并会有几个部分以不同的方式对列表进行排序，例如最高评级、最新等。我也看到ionics的幻灯片盒子，如果我自己制作一个华丽的标题，我可以实现它。但我想知道是否有人为此创建了一个软件包或者有任何有用的建议，如果我必须自己做的话。此外，这是fitrpg的图片，显示了我要实现的内容。我需要像“All Active”和“Completed”这样的选项卡，你可以在它们之间切换。

- epelc

Answer 1

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

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

- fer

---

我看了一下那个插件，但是它有一个主要的错误，目前无法显示动态数据。请参见此问题 https://github.com/saravmajestic/ionic/issues/26 - Guille Acosta

Answer 2

这是一个必须的功能，社区中已经有人提出了请求。我也在等待可滚动选项卡，似乎正在考虑！也许它将在未来的发布版本中提供。请参见Github问题和Trello。

- Aman Gupta

Answer 3

我使用了HTML和CSS来制作这些可滚动的标签页。需要注意的是，可滚动标签页功能目前并不可用。但是下面我想提到的解决方案对我非常有效。

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

注意：在开发期间，您将无法在浏览器上滚动，但是一旦安装应用程序，它将在滑动时起作用...也适用于Ionic View。

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

- Tilakraj Gandhi