css - Ionic 2 如何使 ionic 列表从下往上增长？

Question

这是我的代码的要点:

<ion-content>
  <ion-list>
    <ion-item *ngFor="let item of array">{{item.name}}</ion-item>
  </ion-list>
</ion-content>
<ion-footer>
  <ion-searchbar (ionInput)="search()"></ion-searchbar>
</ion-footer>

想法是在屏幕底部有一个搜索栏，上面有一个列表，该列表会根据搜索栏的输入而变化。但是，如果元素很少，此代码将使列表自上而下填充，并且在它和搜索栏之间有很多空白。我希望列表紧贴搜索栏(基本上与 ion-content 的底部对齐)，同时仍可在 ion-content 中滚动。有哪些方法可以做到这一点？

Answer 1

Working Plunker

要将 ion-list 元素推到底部，您需要:

• 将 View 封装设置为无
• 将 ion-list 的容器设置为 display: flex 和 flex-direction: column
• 使用 margin-top: auto 为 ion-list 元素设置样式

无需更改您的 html 模板，并且 here is a good answer解释如何将内容推送到容器底部。

组件装饰器

@Component({
  selector: 'page-home',
  templateUrl: 'pages/home/home.html',
  styles: [`
    .scroll-content {
      display: flex;
      flex-direction: column;
    }
    .scroll-content ion-list {
      margin-top: auto;
      margin-bottom: 0;
    }
  `],
  encapsulation: ViewEncapsulation.None
})