0

イオン タブを使用しようとすると問題が発生します。

画面の下部に常に表示されるようにする必要があります（のようなものposition: fixed; bottom: 0; left: 0;）。

私が抱えている問題は、現在のセットアップでは、想定どおりに動作しないことです。

私が使用しているテンプレートは次のとおりです。

  <h2>This is subview</h2>
  <div class="list">
    <div class="item " ng-repeat="el in elements">
      {{el.name}}
    </div>
  </div>
      <div class="tabs tabs-icon-only tabs-dark">
        <a class="tab-item">test</a>
        <a class="tab-item">test 1</a>
        <a class="tab-item">test 2</a>
    </div>

しかし、タブは画面の下部にリンクされているため、ページをスクロールする必要がある場合、異なる z-index で下にスクロールするコンテンツで常に表示されるのではなく、下部に表示されます。

私はこれをひどく説明したかもしれないので、これをよりよく説明する例を次に示します: http://codepen.io/NickHG/pen/NNZYwK?editors=1010

要約すると、ページが長くてもタブを常に下部に固定するにはどうすればよいですか?

PS: 何らかの形で重要な場合、これはすべてサブ ビューを参照します。

アドバイスや助けをありがとう

4

3 に答える 3

1

最後に、タブを1レベル上に移動してサブビューに表示されないようにし、スコープイベントの一部をサブビューコントローラーではなくメインコントローラーにコピーして解決しました。

変更したコードは次のとおりです: http://codepen.io/NickHG/pen/NNZYwK?editors=1010

<ion-view>
    <ion-content>
      <h1>Details for id</h1>      
      Below the line, subview content:
      <hr>
      <div ui-view="myDetailsSubview"></div>

    </ion-content>

    <ion-tabs class="tabs-positive tabs-icon-top">      
      <ion-tab>test 1</ion-tab>
      <ion-tab>test 2</ion-tab>     
      <ion-tab>test 3</ion-tab>
    </ion-tabs>

</ion-view>
于 2016-05-20T16:04:28.727 に答える
0

あなたの<ion-content> <ion-content scroll="false">Imに追加するかどうかはよくわかりませんが、イオンコンテンツの外に追加する必要があるかもしれませんが、幸運を祈ります!

于 2016-05-20T09:36:24.543 に答える