如何让 ion-scroll 适合或包裹里面的所有内容？

Question

我有以下内容，但它无法让我滚动浏览整个项目列表。当我向 ` 添加高度时，它允许我根据此高度滚动，但这对于大小可能不同的列表是不正确的。

是否有任何干净的方法（不在 HTML 中使用 style="height: ..."）使滚动 fit/wrap 成为内容？

<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>

Link 演示：http://play.ionic.io/app/e13756f7b285

正如您在演示中看到的，最后一项没有显示，我想要顶部的静态 header 和下面的 ion-scroll。

Answer 1

查看此演示：http://play.ionic.io/app/55da08c5a9b5

Headers 不应保留在 <ion-content> 内，即使您在 <ion-view> 下方使用自定义 header.Put 也是如此。永远不要覆盖 classes 中内置的 ionic，就像您使用 .header 所做的那样，它是 ionic 中内置的 class。所以制作两个自定义 classes，一个定义 header :

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

和其他添加到 <ion-content>，以便内容知道从哪里开始。由于您的 header 身高是 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">

如何让 ion-scroll 适合或包裹里面的所有内容？

How to make ion-scroll fit or wrap all the content inside it?

ionic-framework

ionic

ionic-view