2

次のものがありますが、アイテムのリスト全体をスクロールできません。` に高さを追加すると、この高さに応じてスクロールできますが、これはサイズが異なる可能性のあるリストには正しくありません。

(HTML で style="height: ..." を使用せずに) スクロールをコンテンツに合わせてラップするクリーンな方法はありますか?

<ion-content>
     //more html elements here...
     <ion-scroll>
            <div class="list">
              <ul>
                <li class="item" ng-repeat="doctor in doctors">

                </li>
              </ul>
            </div>
     </ion-scroll>
  </ion-content>

デモへのリンク: http://play.ionic.io/app/e13756f7b285

デモでわかるように、最後のアイテムは表示されていません。上部に静的ヘッダー、下部にイオン スクロールが必要です。

4

1 に答える 1

2

このデモを参照してください: http://play.ionic.io/app/55da08c5a9b5

<ion-content>カスタムヘッダーを使用している場合でも、ヘッダーを内部に保持しないでください。下に配置してください<ion-view>。そして、イオンの組み込みクラスをオーバーライドしないでください.header。これは、イオンの組み込みクラスです。2 つのカスタム クラスを作成し、1 つは header を定義します。

.my-custom-header{
  height: 100px;
  background: red;
}

その他に追加するもの<ion-content>があるため、コンテンツはどこから始めればよいかがわかります。ヘッダーの高さが100pxであるため、コンテンツは から始まり100pxます。

.has-custom-header{
  top:100px;
}

<ion-scroll>コンテンツのデフォルトのスクロールを使用できるため、今は必要ありません。

<ion-view>
<div class="my-custom-header">
      STATIC HEADER
</div>
<ion-content class="has-custom-header">
于 2015-09-11T21:35:31.850 に答える