1

フロントエンドに onsen-ui 2 を使用して Android アプリを作成しています。1 ページに複数のカテゴリをタブで表示します。カテゴリが 7 つほどあるので、ネイティブの Android アプリのようにスクロール可能なタブバーを実装したいと考えています。ということで、基本的にonsen-ui 2を使ってタブバーのスクロールなどを行う方法ですが、今のところ組み込みではないと思います。私はこのようなものを実装したい:

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

マテリアライズ CSS を使用してみましたが、完全には機能しません。ページの幅が増え、レスポンシブ ビューが壊れます。

更新: これらの CSS プロパティを設定して、拡張ビューを取得します。

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

これに加えて、カスタム jquery.kinetic ライブラリを追加して、ここからタッチスクロールを取得しました: http://davetayls.me/jquery.kinetic/ そして、次のように ons-tabbar に初期化しました: <ons-tabbar modifier="material" id="tab"> //in HTML

$(document).ready(function(){
$("#tab").kinetic();
});

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

4

1 に答える 1

2

技術的には、ボーナスの矢などをどれだけ気にするかによって異なります。そのような追加機能が本当に必要な場合は、外部ライブラリが役立つ場合があります。ただし、スクロール可能なタブバーを使用する機能だけが必要な場合は、数行の css でそれほど手間をかけずにそれを実現できます。

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

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

デモ

デモではwidth: 20%、アイテムにも追加しました。それが気に入らない場合は、パディングなどを追加してアイテムの見栄えを良くすることができます。通常、次のようなものpadding: 0 10pxで十分です。

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

また、キネティックについてのメモ: 見栄えは良いですが、最近のほとんどの携帯電話には既に優れたモーション スクロールが備わっているように見えるため (少なくとも imo)、キネティックなしでどのように感じられるかを確認する必要があります。それでもあなたの決断です。

于 2016-04-25T11:10:35.443 に答える