javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(virtual-scroll): fixes dynamic changes

Browse Source
This commit is contained in:
Manu MA
2018-12-19 00:27:04 +01:00
committed by GitHub
parent 320eb03168
commit d1cecf142b
11 changed files with 234 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
angular/test/test-app/src/app/virtual-scroll/virtual-scroll.component.html
View File

@@ -4,18 +4,26 @@
<ion-title>
Virtual Scroll Test
</ion-title>
<ion-buttons slot="end">
<ion-button (click)="addItems()">
<ion-icon name="add" slot="icon-only"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-virtual-scroll [items]="items" [headerFn]="myHeaderFn" [footerFn]="myFooterFn">
<ion-item-divider *virtualHeader="let header">{{ header }}</ion-item-divider>
<ion-item-divider *virtualFooter="let footer">-- {{ footer }}</ion-item-divider>
<!-- <ion-item *virtualItem="let item" itemHeight="itemHeight">
{{item.name}}
</ion-item> -->
<ion-item *virtualItem="let item" [routerLink]="['/', 'virtual-scroll-detail', item]">
<ion-label>
<app-virtual-scroll-inner [value]="item"></app-virtual-scroll-inner>
<app-virtual-scroll-inner [value]="item.name"></app-virtual-scroll-inner>
</ion-label>
<ion-icon *ngIf="(item % 2) === 0" name="airplane" slot="start"></ion-icon>
<ion-toggle slot="end" [checked]="(item % 2) === 1"></ion-toggle>
<ion-icon *ngIf="(item.name % 2) === 0" name="airplane" slot="start"></ion-icon>
<ion-toggle slot="end" [(ngModel)]="item.checked"></ion-toggle>
</ion-item>
</ion-virtual-scroll>
</ion-content>

17
angular/test/test-app/src/app/virtual-scroll/virtual-scroll.component.ts
View File

@@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild } from '@angular/core';
import { HeaderFn } from '@ionic/core';
import { IonVirtualScroll } from '@ionic/angular';
@Component({
selector: 'app-virtual-scroll',
@@ -7,7 +8,11 @@ import { HeaderFn } from '@ionic/core';
})
export class VirtualScrollComponent {
items = Array.from({length: 1000}, (_, i) => i);
@ViewChild(IonVirtualScroll) virtualScroll: IonVirtualScroll;
items = Array.from({length: 100}, (_, i) => ({ name: `${i}`, checked: true}));
itemHeight = () => 44;
myHeaderFn: HeaderFn = (_, index) => {
if ((index % 10) === 0) {
@@ -20,4 +25,12 @@ export class VirtualScrollComponent {
return `Footer ${index}`;
}
}
addItems() {
console.log('adding items');
this.items.push(
{ name: `New Item`, checked: true}
);
this.virtualScroll.checkEnd();
}
}