离子可滚动标签

Posted 2023-03-06

【中文标题】离子可滚动标签

【英文标题】：Ionic scrollable tabs

【发布时间】：2014-09-27 14:30:39

【问题描述】：

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

【参考方案1】：

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

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

【讨论】：

我查看了那个插件，但有一个主要错误，目前不显示动态数据。看到这个问题github.com/saravmajestic/ionic/issues/26

【参考方案2】：

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

【参考方案3】：

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

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

注意：在开发过程中您将无法在浏览器上滚动，但是一旦您安装了应用程序，它就可以在滑动时使用...也可以在 ionic 视图中使用

该部分的 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="tabtab.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"
                    
];