离子2如何使离子列表从底部向上生长？

Question

以下是我的代码的要点：

setTimeout( function(){ ModeratorActions(StrUsername, StrPage) }, 30000);

我们的想法是在屏幕底部设置一个搜索栏，其上方的列表会根据搜索栏输入而变化。但是，如果项目很少，此代码将使列表自上而下填充它与搜索栏之间的大量空白。我希望列表能够拥抱搜索栏（基本上与离子内容的底部对齐），同时仍然可以在离子内容中保持滚动状态。有什么方法可以做到这一点？

Answer 1

Working Plunker

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

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

不需要更改您的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
})

Answer 2

@ adriancarriger的答案很棒，但可以做出一点改进。由于您将新元素推送到列表的底部，我想总是将内容滚动到底部，以使新项始终可见是很好的。只需添加几行代码即可轻松实现这一目标：

11