Question

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

是否有任何干净的方法（不使用style =＆＃34; height：...＆＃34;在HTML中）以使滚动适合/包装它的内容？

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

演示链接：password_verify

正如你在演示中看到的那样，最后一项没有显示，我想要一个顶部的静态标题和下面的离子滚动。

Answer 1

请参阅此演示：http://play.ionic.io/app/55da08c5a9b5

标题不应保留在<ion-content>内，即使您使用的是自定义标题。请将其放在<ion-view>下方。并且永远不会覆盖离子内置类，就像你使用.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">

如何使离子滚动适合或包裹其中的所有内容？

1 个答案: