mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 21:15:24 +08:00
72 lines
1.5 KiB
HTML
72 lines
1.5 KiB
HTML
<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="#header" class="virtual-header">
|
|
Header: {{header.date}}
|
|
</div>
|
|
|
|
<div *virtualItem="#item" class="virtual-item">
|
|
<ion-img [src]="item.imgSrc"></ion-img>
|
|
<!--{{ item.index }}-->
|
|
</div>
|
|
|
|
<div *virtualFooter="#footer" class="virtual-footer">
|
|
footer
|
|
</div>
|
|
|
|
</ion-list>
|
|
|
|
</ion-content>
|
|
|