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

refactor(virtual-scroll): add console.warn when approxItemHeight is unset

Browse Source
This commit is contained in:
Alex Muramoto
2016-08-18 10:57:27 -07:00
committed by Adam Bradley
parent 6fb848cc4a
commit de12a4e905
1 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/virtual-scroll/virtual-scroll.ts
View File

@ -86,6 +86,11 @@ import { VirtualFooter, VirtualHeader, VirtualItem } from './virtual-item';
* *
* ### Approximate Widths and Heights * ### 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 * The approximate width and height of each template is used to help
* determine how many cells should be created, and to help calculate * determine how many cells should be created, and to help calculate
* the height of the scrollable area. Note that the actual rendered size * 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 * It's also important to know that Ionic's default item sizes have
* slightly different heights between platforms, which is perfectly fine. * 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 * ### Images Within Virtual Scroll
@ -215,15 +217,17 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
@Input() approxItemWidth: string = '100%'; @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 * This dimension is used to help determine how many cells should
* be created when initialized, and to help calculate the height of * be created when initialized, and to help calculate the height of
* the scrollable area. This height value can only use `px` units. * the scrollable area. This height value can only use `px` units.
* Note that the actual rendered size of each cell comes from the * Note that the actual rendered size of each cell comes from the
* app's CSS, whereas this approximation is used to help calculate * 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. * @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'); console.debug('VirtualScroll, onResize');
this.update(false); this.update(false);
}); });
if (!this.approxItemHeight) {
this.approxItemHeight = '40px';
console.warn('approxItemHeight set to default: Provide approxItemHeight to ensure proper virtual scroll rendering');
}
} }
} }