fix(virtual-scroll): fix tabs content loading

This commit is contained in:
Adam Bradley
2016-12-07 14:46:58 -06:00
parent cf725d3cd7
commit aec8f51b60
2 changed files with 27 additions and 30 deletions

View File

@ -184,15 +184,28 @@ export class Tab2 {
</p> </p>
<p> <p>
<button ion-button (click)="selectPrevious()">Select Previous Tab</button> <button ion-button (click)="selectPrevious()">Select Previous Tab</button>
</p>
<p>
<button ion-button (click)="appNavPop()">App Nav Pop</button> <button ion-button (click)="appNavPop()">App Nav Pop</button>
</p> </p>
<ion-list [virtualScroll]="items" [headerFn]="headerFn">
<ion-item *virtualItem="let item">
Item: {{item}}
</ion-item>
</ion-list>
</ion-content> </ion-content>
` `
}) })
export class Tab3 { export class Tab3 {
constructor(private alertCtrl: AlertController, private modalCtrl: ModalController, private tabs: Tabs, private app: App) {} items: number[] = [];
constructor(private alertCtrl: AlertController, private modalCtrl: ModalController, private tabs: Tabs, private app: App) {
for (var i = 0; i < 100; i++) {
this.items.push(i);
}
}
presentAlert() { presentAlert() {
let alert = this.alertCtrl.create({ let alert = this.alertCtrl.create({

View File

@ -335,8 +335,6 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
this._trackBy = val; this._trackBy = val;
} }
private _hasUpdate = false;
constructor( constructor(
private _iterableDiffers: IterableDiffers, private _iterableDiffers: IterableDiffers,
private _elementRef: ElementRef, private _elementRef: ElementRef,
@ -356,7 +354,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
// wait for the content to be rendered and has readable dimensions // wait for the content to be rendered and has readable dimensions
_content.readReady.subscribe(() => { _content.readReady.subscribe(() => {
this.readUpdate(true, true); this.readUpdate(true);
if (!this._scrollSub) { if (!this._scrollSub) {
// listen for scroll events // listen for scroll events
@ -370,19 +368,10 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
}); });
} }
readUpdate(checkDataChanges: boolean, dimensionsUpdated: boolean) { readUpdate(dimensionsUpdated: boolean) {
if (!this._records) return; if (!this._records) return;
if (checkDataChanges && !dimensionsUpdated) { console.debug(`virtual-scroll, readUpdate, dimensionsUpdated: ${dimensionsUpdated}`);
if (isPresent(this._differ) && !isPresent(this._differ.diff(this._records))) {
// no changes
return;
}
}
console.debug(`virtual-scroll, readUpdate, checkDataChanges: ${checkDataChanges}, dimensionsUpdated: ${dimensionsUpdated}`);
this._hasUpdate = true;
// reset everything // reset everything
this._cells.length = 0; this._cells.length = 0;
@ -399,9 +388,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
} }
writeUpdate() { writeUpdate() {
if (!this._hasUpdate) { if (!this._records) return;
return;
}
console.debug(`virtual-scroll, writeUpdate`); console.debug(`virtual-scroll, writeUpdate`);
@ -414,16 +401,20 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
// ******** DOM WRITE **************** // ******** DOM WRITE ****************
this.renderVirtual(); this.renderVirtual();
}
this._hasUpdate = false; private _hasChanges() {
return (isPresent(this._records) && isPresent(this._differ) && isPresent(this._differ.diff(this._records)));
} }
/** /**
* @private * @private
*/ */
ngDoCheck() { ngDoCheck() {
if (this._init) { if (this._init && this._hasChanges()) {
this.readUpdate(true, false); // only continue if we've already initialized
// and if there actually are changes
this.readUpdate(false);
this.writeUpdate(); this.writeUpdate();
} }
} }
@ -444,13 +435,6 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
this.approxItemHeight = '40px'; this.approxItemHeight = '40px';
console.warn('Virtual Scroll: Please provide an "approxItemHeight" input to ensure proper virtual scroll rendering'); console.warn('Virtual Scroll: Please provide an "approxItemHeight" input to ensure proper virtual scroll rendering');
} }
// this.update(true);
// this._platform.onResize(() => {
// console.debug('VirtualScroll, onResize');
// this.update(false);
// });
} }
} }