離子2如何使離子列表從底部向上生長？

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>

我們的想法是在屏幕底部設置一個搜索欄，其上方的列表會根據搜索欄輸入而變化。 但是，如果項目很少，此代碼將使列表自上而下填充它與搜索欄之間的大量空白。 我希望列表能夠擁抱搜索欄（基本上與離子內容的底部對齊），同時仍然可以在離子內容中保持可滾動狀態。 有什么方法可以做到這一點？

Answer 1

工作的Plunker

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

• 將視圖封裝設置為none
• 設置ion-list容器的樣式display: flex和flex-direction: column
• 使用margin-top: auto設置ion-list元素的樣式

不需要對html模板進行任何更改， 這里有一個很好的答案，解釋了如何將內容推送到容器的底部。

組件裝飾器

@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的答案很棒，但可以做一點改進。 由於您將新元素推送到列表的底部，我想總是將內容滾動到底部，以使新項始終可見是很好的。 只需添加幾行代碼就可以輕松實現這一目標：

// First add ViewChild and Content imports
import { ViewChild, Component, ViewEncapsulation } from '@angular/core';
import { NavController, Content } from 'ionic-angular';

@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
})
export class HomePage {
  @ViewChild(Content) content: Content; // <-- get a reference of the content

  count = 4; // for demo
  appName = 'Ionic App';
  array = [
    { name: 'item-1' },
    { name: 'item-2' },
    { name: 'item-3' }
  ];

  constructor(private navController: NavController) {

  }
  search() {
    console.log('searching...');
  }
  add(number) {
    let itemNumber = this.count;
    this.array.push({ name: 'item-' + itemNumber });
    this.scrollToBottom(); // <- when the new item is pushed, scroll to the bottom to show it
    this.count += number;
  }

  scrollToBottom(){
    // use the content's dimension to obtain the current height of the scroll
    let dimension = this.content.getContentDimensions();

    // scroll to it (you can also set the duration in ms by passing a third parameter to the scrollTo(x,y,duration) method.
    this.content.scrollTo(0, dimension.scrollHeight);
  }
}