mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 21:48:42 +08:00
fix(virtual-scroll): fix tabs content loading
This commit is contained in:
@ -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({
|
||||||
|
@ -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);
|
|
||||||
// });
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user