mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 04:53:58 +08:00
refactor(virtual-scroll): add console.warn when approxItemHeight is unset
This commit is contained in:

committed by
Adam Bradley

parent
6fb848cc4a
commit
de12a4e905
@ -86,6 +86,11 @@ import { VirtualFooter, VirtualHeader, VirtualItem } from './virtual-item';
|
||||
*
|
||||
* ### Approximate Widths and Heights
|
||||
*
|
||||
* If the height of items in the virtual scroll are not close to the
|
||||
* default size of 40px, it is extremely important to provide an value for
|
||||
* approxItemHeight height. An exact pixel-perfect size is not necessary,
|
||||
* but without an estimate the virtual scroll will not render correctly.
|
||||
*
|
||||
* The approximate width and height of each template is used to help
|
||||
* determine how many cells should be created, and to help calculate
|
||||
* the height of the scrollable area. Note that the actual rendered size
|
||||
@ -94,10 +99,7 @@ import { VirtualFooter, VirtualHeader, VirtualItem } from './virtual-item';
|
||||
*
|
||||
* It's also important to know that Ionic's default item sizes have
|
||||
* slightly different heights between platforms, which is perfectly fine.
|
||||
* An exact pixel-perfect size is not necessary, but a good estimation
|
||||
* is important. Basically if each item is roughly 500px tall, rather than
|
||||
* the default of 40px tall, it's extremely important to know for virtual
|
||||
* scroll to calculate a good height.
|
||||
*
|
||||
*
|
||||
*
|
||||
* ### Images Within Virtual Scroll
|
||||
@ -215,15 +217,17 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
|
||||
@Input() approxItemWidth: string = '100%';
|
||||
|
||||
/**
|
||||
* @input {string} The approximate height of each item template's cell.
|
||||
* @input {string} Default is `40px`. It is important to provide this
|
||||
* if virtual item height will be significantly larger than the default
|
||||
* The approximate height of each virtual item template's cell.
|
||||
* This dimension is used to help determine how many cells should
|
||||
* be created when initialized, and to help calculate the height of
|
||||
* the scrollable area. This height value can only use `px` units.
|
||||
* Note that the actual rendered size of each cell comes from the
|
||||
* app's CSS, whereas this approximation is used to help calculate
|
||||
* initial dimensions. Default is `40px`.
|
||||
* initial dimensions.
|
||||
*/
|
||||
@Input() approxItemHeight: string = '40px';
|
||||
@Input() approxItemHeight: string;
|
||||
|
||||
/**
|
||||
* @input {string} The approximate width of each header template's cell.
|
||||
@ -345,6 +349,11 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
|
||||
console.debug('VirtualScroll, onResize');
|
||||
this.update(false);
|
||||
});
|
||||
|
||||
if (!this.approxItemHeight) {
|
||||
this.approxItemHeight = '40px';
|
||||
console.warn('approxItemHeight set to default: Provide approxItemHeight to ensure proper virtual scroll rendering');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user