mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 13:01:01 +08:00
fix(scroll): fix content dimensions for js scrolling
This commit is contained in:
@ -450,7 +450,7 @@ export class Content extends Ion implements OnDestroy, OnInit {
|
|||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
enableJsScroll() {
|
enableJsScroll() {
|
||||||
this._scroll.enableJsScroll(this.contentTop, this.contentBottom);
|
this._scroll.enableJsScroll(this._cTop, this._cBottom);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -199,7 +199,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
|
|||||||
_data: VirtualData = {
|
_data: VirtualData = {
|
||||||
scrollTop: 0,
|
scrollTop: 0,
|
||||||
};
|
};
|
||||||
_queue: ScrollQueue = null;
|
_queue: number;
|
||||||
|
|
||||||
@ContentChild(VirtualItem) _itmTmp: VirtualItem;
|
@ContentChild(VirtualItem) _itmTmp: VirtualItem;
|
||||||
@ContentChild(VirtualHeader) _hdrTmp: VirtualHeader;
|
@ContentChild(VirtualHeader) _hdrTmp: VirtualHeader;
|
||||||
@ -506,23 +506,25 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
|
|||||||
// set the scroll top from the scroll event
|
// set the scroll top from the scroll event
|
||||||
data.scrollTop = ev.scrollTop;
|
data.scrollTop = ev.scrollTop;
|
||||||
|
|
||||||
if (this._queue === ScrollQueue.RequiresDomWrite) {
|
if (this._queue === SCROLL_QUEUE_DOM_WRITE) {
|
||||||
// there are DOM writes we need to take care of in this frame
|
// there are DOM writes we need to take care of in this frame
|
||||||
|
|
||||||
this._dom.write(() => {
|
this._dom.write(() => {
|
||||||
|
const recordsLength = this._records.length;
|
||||||
|
|
||||||
// ******** DOM WRITE ****************
|
// ******** DOM WRITE ****************
|
||||||
writeToNodes(nodes, cells, this._records.length);
|
writeToNodes(nodes, cells, recordsLength);
|
||||||
|
|
||||||
// ******** DOM WRITE ****************
|
// ******** DOM WRITE ****************
|
||||||
this._setHeight(
|
this._setHeight(
|
||||||
estimateHeight(this._records.length, cells[cells.length - 1], this._vHeight, 0.25)
|
estimateHeight(recordsLength, cells[cells.length - 1], this._vHeight, 0.25)
|
||||||
);
|
);
|
||||||
|
|
||||||
// we're done here, good work
|
// we're done here, good work
|
||||||
this._queue = ScrollQueue.NoChanges;
|
this._queue = SCROLL_QUEUE_NO_CHANGES;
|
||||||
});
|
});
|
||||||
|
|
||||||
} else if (this._queue === ScrollQueue.RequiresChangeDetection) {
|
} else if (this._queue === SCROLL_QUEUE_CHANGE_DETECTION) {
|
||||||
// we need to do some change detection in this frame
|
// we need to do some change detection in this frame
|
||||||
|
|
||||||
this._dom.write(() => {
|
this._dom.write(() => {
|
||||||
@ -536,7 +538,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// on the next frame we need write to the dom nodes manually
|
// on the next frame we need write to the dom nodes manually
|
||||||
this._queue = ScrollQueue.RequiresDomWrite;
|
this._queue = SCROLL_QUEUE_DOM_WRITE;
|
||||||
});
|
});
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
@ -571,7 +573,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
|
|||||||
|
|
||||||
if (hasChanges) {
|
if (hasChanges) {
|
||||||
// queue making updates in the next frame
|
// queue making updates in the next frame
|
||||||
this._queue = ScrollQueue.RequiresChangeDetection;
|
this._queue = SCROLL_QUEUE_CHANGE_DETECTION;
|
||||||
|
|
||||||
// update the bound context for each node
|
// update the bound context for each node
|
||||||
updateNodeContext(nodes, cells, data);
|
updateNodeContext(nodes, cells, data);
|
||||||
@ -598,6 +600,8 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
|
|||||||
// ******** DOM READS ABOVE / DOM WRITES BELOW ****************
|
// ******** DOM READS ABOVE / DOM WRITES BELOW ****************
|
||||||
|
|
||||||
this._dom.write(() => {
|
this._dom.write(() => {
|
||||||
|
const recordsLength = this._records.length;
|
||||||
|
|
||||||
// update the bound context for each node
|
// update the bound context for each node
|
||||||
updateNodeContext(nodes, cells, data);
|
updateNodeContext(nodes, cells, data);
|
||||||
|
|
||||||
@ -607,30 +611,20 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// ******** DOM WRITE ****************
|
// ******** DOM WRITE ****************
|
||||||
writeToNodes(nodes, cells, this._records.length);
|
writeToNodes(nodes, cells, recordsLength);
|
||||||
|
|
||||||
// ******** DOM WRITE ****************
|
// ******** DOM WRITE ****************
|
||||||
this._setHeight(
|
this._setHeight(
|
||||||
estimateHeight(this._records.length, cells[cells.length - 1], this._vHeight, 0.05)
|
estimateHeight(recordsLength, cells[cells.length - 1], this._vHeight, 0.05)
|
||||||
);
|
);
|
||||||
|
|
||||||
this._queue = ScrollQueue.NoChanges;
|
this._queue = SCROLL_QUEUE_NO_CHANGES;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* DOM WRITE
|
* NO DOM
|
||||||
*/
|
*/
|
||||||
private _setHeight(newVirtualHeight: number) {
|
|
||||||
if (newVirtualHeight !== this._vHeight) {
|
|
||||||
// ******** DOM WRITE ****************
|
|
||||||
this._renderer.setElementStyle(this._elementRef.nativeElement, 'height', newVirtualHeight > 0 ? newVirtualHeight + 'px' : '');
|
|
||||||
|
|
||||||
this._vHeight = newVirtualHeight;
|
|
||||||
console.debug('VirtualScroll, height', newVirtualHeight);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private _listeners() {
|
private _listeners() {
|
||||||
if (!this._scrollSub) {
|
if (!this._scrollSub) {
|
||||||
if (this._config.getBoolean('virtualScrollEventAssist')) {
|
if (this._config.getBoolean('virtualScrollEventAssist')) {
|
||||||
@ -651,6 +645,19 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DOM WRITE
|
||||||
|
*/
|
||||||
|
private _setHeight(newVirtualHeight: number) {
|
||||||
|
if (newVirtualHeight !== this._vHeight) {
|
||||||
|
// ******** DOM WRITE ****************
|
||||||
|
this._renderer.setElementStyle(this._elementRef.nativeElement, 'height', newVirtualHeight > 0 ? newVirtualHeight + 'px' : '');
|
||||||
|
|
||||||
|
this._vHeight = newVirtualHeight;
|
||||||
|
console.debug('VirtualScroll, height', newVirtualHeight);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
@ -676,9 +683,6 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const SCROLL_DIFFERENCE_MINIMUM = 40;
|
const SCROLL_DIFFERENCE_MINIMUM = 40;
|
||||||
|
const SCROLL_QUEUE_NO_CHANGES = 1;
|
||||||
export const enum ScrollQueue {
|
const SCROLL_QUEUE_CHANGE_DETECTION = 2;
|
||||||
NoChanges,
|
const SCROLL_QUEUE_DOM_WRITE = 3;
|
||||||
RequiresChangeDetection,
|
|
||||||
RequiresDomWrite
|
|
||||||
}
|
|
||||||
|
@ -186,17 +186,11 @@ export class ScrollView {
|
|||||||
|
|
||||||
console.debug(`ScrollView, enableJsScroll`);
|
console.debug(`ScrollView, enableJsScroll`);
|
||||||
|
|
||||||
|
const ev = self.ev;
|
||||||
const positions: number[] = [];
|
const positions: number[] = [];
|
||||||
let rafCancel: Function;
|
let rafCancel: Function;
|
||||||
let max: number;
|
let max: number;
|
||||||
|
|
||||||
const ev = self.ev;
|
|
||||||
ev.scrollLeft = 0;
|
|
||||||
ev.startX = 0;
|
|
||||||
ev.deltaX = 0;
|
|
||||||
ev.velocityX = 0;
|
|
||||||
ev.directionX = null;
|
|
||||||
|
|
||||||
function setMax() {
|
function setMax() {
|
||||||
if (!max) {
|
if (!max) {
|
||||||
// ******** DOM READ ****************
|
// ******** DOM READ ****************
|
||||||
@ -330,7 +324,7 @@ export class ScrollView {
|
|||||||
|
|
||||||
} else {
|
} else {
|
||||||
self.isScrolling = false;
|
self.isScrolling = false;
|
||||||
ev.velocityY = ev.velocityX = 0;
|
ev.velocityY = 0;
|
||||||
self.scrollEnd.next(ev);
|
self.scrollEnd.next(ev);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user