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>。并且永远不要覆盖 ionic 内置类，就像您对 ionic 所做的那样.header，它是内置在 ionic 类中的。所以制作两个自定义类，一个定义 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 回答