<style>
  .virtual-header {
    width: 100%;
    margin-bottom: 5px;
    padding: 10px;
    background: #eee;
  }
  .virtual-item {
    display: inline-block;
    vertical-align: top;
    width: 80px;
    height: 80px;
    margin-left: 5px;
    margin-bottom: 5px;
    border: 1px solid gray;
  }
  .virtual-footer {
    display: inline-block;
    width: 80px;
    height: 80px;
    border: 1px solid red;
    margin-left: 5px;
    margin-bottom: 5px;
    padding: 10px;
  }
  .virtual-scroll > :first-child {
    border-top: 2px solid blue;
  }
  .virtual-scroll > :last-child {
    background: red;
  }
</style>

<ion-navbar *navbar>
  <ion-title>Virtual Scroll: Image Gallery</ion-title>
  <ion-buttons end>
    <button (click)="reload()">
      Reload
    </button>
  </ion-buttons>
</ion-navbar>

<ion-content>

  <ion-list [virtualScroll]="items"
            [headerFn]="headerFn"
            [footerFn]="footerFn"
            approxItemWidth="80px"
            approxItemHeight="80px"
            approxFooterWidth="80px"
            approxFooterHeight="80px"
            approxHeaderWidth="100%"
            approxHeaderHeight="36px">

    <div *virtualHeader="let header" class="virtual-header">
      Header: {{header.date}}
    </div>

    <div *virtualItem="let item" class="virtual-item">
      <ion-img [src]="item.imgSrc"></ion-img>
      <!--{{ item.index }}-->
    </div>

    <div *virtualFooter="let footer" class="virtual-footer">
      footer
    </div>

  </ion-list>

</ion-content>

