9

こんにちは、イオンにスクロール可能なタブのようなものがあるかどうか、自分で何かを作る前に疑問に思っていました。ionicで作ったfitrpgアプリで見たのですが、カスタムかどうかわかりませんでした。私は fitrpg のようなリストにそれを使用するつもりであり、最高評価、最新などのようにリストを異なる方法でソートするためのいくつかのセクションがあります。また、イオニクススライド ボックスを見て、私が空想を作ったらそれでそれを実装できると思いましたヘッダー私の自己。しかし、誰かがこれ用のパッケージを作成したかどうか、または自分でやらなければならない場合に役立つアドバイスがあるかどうかを調べると思いました。また、これは私が達成しようとしているもののfitrpgからの写真です。All Active や Completed など、スワイプして切り替えられるタブが必要です。

ここに画像の説明を入力

4

3 に答える 3

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 FOR THE SAME NOTE: CSS 構造に SASS を使用しています。

.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 に答える