onsen ui 2：アンドロイドスタイルのスクロール可能なタブバーを実装する方法は？

Question

私はフロントエンド用のonsen-ui 2を使ってアンドロイドアプリを作っています。私は1つのページにタブを介して複数のカテゴリを表示します。約7つのカテゴリがあるので、私はネイティブのアンドロイドアプリのようなスクロール可能なタブバーを実装したい。 それで、基本的には、onsen -uiを使ってスクロール可能なタブバーのようにする方法です。今のところ私はそれが組み込みではないと思います。私はCSSを実体使ってみましたが、それはperfectly.Itは、ページの幅を増加し、応答ビューを壊す働きません

http://i.stack.imgur.com/zjILk.png

：私はこのような何かを実装したいです。

アップデート： 私は拡張ビューを取得するために、これらのCSSプロパティを設定します。これに沿って

` .tab-bar{ 
     display: block; 
     table-layout: none; 
     width:200%; //this is the problem now... 
     }` 

私はここからタッチスクロールを取得するには、カスタムjquery.kineticライブラリを追加しました：http://davetayls.me/jquery.kinetic/ およびONS-タブバーに初期化などのこの： <ons-tabbar modifier="material" id="tab"> //in HTML

​​

スクロールタブバーが正常に動作します。タブバークラスの幅が大きすぎると、最後に空白があります。これを克服する方法はありますか？私が考えていたのは、CSSのメディアクエリでしたが、タブは動的に追加されています。だから、将来的には7以上になるかもしれません。

Answer 1

技術的には、ボーナスの矢やそれに類することをどれだけ気にするかによって決まります。このような追加機能が本当に必要な場合は、外部ライブラリが役立ちます。 何をただしたいことは、あなたがCSSの数行に多くの手間をかけずにそれを達成することができ、スクロール可能なタブバーを持っているだけの能力がある場合：

デモで

.tab-bar { 
    display: block; 
    overflow-x: auto; 
    overflow-y: hidden; 
} 

.tab-bar__item { 
    display: inline-block; 
} 

Demo

私はまたにwidth: 20%を追加しました項目。あなたが好きではない場合は、ちょうどいくつかの詰め物または同様のものを追加して、アイテムを見栄え良くすることができます。一般的にはpadding: 0 10pxのようなもので十分です。

>の矢印が必要な場合は、いくつかのjavascriptが必要になると思います。質問はcss3とタグ付けされているので、私はあなたがこれのためにJavaScriptを書くことを避けたいと思っています。

キネティックスに関するメモ：これは素晴らしですが、ほとんどの携帯電話には現在、すばらしいモーションスクロール（少なくともimo）があるように見えるので、それがないと感じるようにしてください。それでもあなたの意思決定です。