如何使离子滚动适合或包裹其中的所有内容？-Java 学习之路

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

是否有任何干净的方法（不使用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

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

1 回答

2
看到这个演示：http://play.ionic.io/app/55da08c5a9b5

即使您使用自定义 Headers ，也不应将 Headers 保留在 <ion-content> 内 . 请将其放在 <ion-view> 下面 . 并且永远不会覆盖离子内置类，就像你使用 .header 一样，它是在离子类中构建的 . 所以制作两个自定义类，一个用于定义 Headers ：
```
.my-custom-header{
  height: 100px;
  background: red;
}
```
和其他添加到 <ion-content> ，所以内容知道从哪里开始 . 由于 Headers 高度为 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">
```
回复于 2024-05-09T06:36:20+08:00

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

1 回答

相关问题