import { ElementRef, EventEmitter, NgZone } from '@angular/core'; import { Content, ScrollEvent } from '../content/content'; import { DomController } from '../../platform/dom-controller'; /** * @name InfiniteScroll * @description * The Infinite Scroll allows you to perform an action when the user * scrolls a specified distance from the bottom or top of the page. * * The expression assigned to the `infinite` event is called when * the user scrolls to the specified distance. When this expression * has finished its tasks, it should call the `complete()` method * on the infinite scroll instance. * * @usage * ```html * * * * {% raw %}{{i}}{% endraw %} * * * * * * * * ``` * * ```ts * @Component({...}) * export class NewsFeedPage { * items = []; * * constructor() { * for (let i = 0; i < 30; i++) { * this.items.push( this.items.length ); * } * } * * doInfinite(infiniteScroll) { * console.log('Begin async operation'); * * setTimeout(() => { * for (let i = 0; i < 30; i++) { * this.items.push( this.items.length ); * } * * console.log('Async operation has ended'); * infiniteScroll.complete(); * }, 500); * } * * } * ``` * * ## `waitFor` method of InfiniteScroll * * In case if your async operation returns promise you can utilize * `waitFor` method inside your template. * * ```html * * * * {{item}} * * * * * * * * ``` * * ```ts * @Component({...}) * export class NewsFeedPage { * items = []; * * constructor() { * for (var i = 0; i < 30; i++) { * this.items.push( this.items.length ); * } * } * * doInfinite(): Promise { * console.log('Begin async operation'); * * return new Promise((resolve) => { * setTimeout(() => { * for (var i = 0; i < 30; i++) { * this.items.push( this.items.length ); * } * * console.log('Async operation has ended'); * resolve(); * }, 500); * }) * } * } * ``` * * ## Infinite Scroll Content * * By default, Ionic uses the infinite scroll spinner that looks * best for the platform the user is on. However, you can change the * default spinner or add text by adding properties to the * `ion-infinite-scroll-content` component. * * ```html * * * * * * * * * ``` * * * ## Further Customizing Infinite Scroll Content * * The `ion-infinite-scroll` component holds the infinite scroll logic. * It requires a child component in order to display the content. * Ionic uses `ion-infinite-scroll-content` by default. This component * displays the infinite scroll and changes the look depending * on the infinite scroll's state. Separating these components allows * developers to create their own infinite scroll content components. * You could replace our default content with custom SVG or CSS animations. * * @demo /docs/demos/src/infinite-scroll/ * */ export declare class InfiniteScroll { private _content; private _zone; private _elementRef; private _dom; _lastCheck: number; _highestY: number; _scLsn: any; _thr: string; _thrPx: number; _thrPc: number; _position: string; _init: boolean; /** * @internal */ state: string; /** * @input {string} The threshold distance from the bottom * of the content to call the `infinite` output event when scrolled. * The threshold value can be either a percent, or * in pixels. For example, use the value of `10%` for the `infinite` * output event to get called when the user has scrolled 10% * from the bottom of the page. Use the value `100px` when the * scroll is within 100 pixels from the bottom of the page. * Default is `15%`. */ threshold: string; /** * @input {boolean} If true, Whether or not the infinite scroll should be * enabled or not. Setting to `false` will remove scroll event listeners * and hide the display. */ enabled: boolean; /** * @input {string} The position of the infinite scroll element. * The value can be either `top` or `bottom`. * Default is `bottom`. */ position: string; /** * @output {event} Emitted when the scroll reaches * the threshold distance. From within your infinite handler, * you must call the infinite scroll's `complete()` method when * your async operation has completed. */ ionInfinite: EventEmitter; constructor(_content: Content, _zone: NgZone, _elementRef: ElementRef, _dom: DomController); _onScroll(ev: ScrollEvent): 1 | 2 | 3 | 5 | 6; /** * Call `complete()` within the `infinite` output event handler when * your async operation has completed. For example, the `loading` * state is while the app is performing an asynchronous operation, * such as receiving more data from an AJAX request to add more items * to a data list. Once the data has been received and UI updated, you * then call this method to signify that the loading has completed. * This method will change the infinite scroll's state from `loading` * to `enabled`. */ complete(): void; /** * Pass a promise inside `waitFor()` within the `infinite` output event handler in order to * change state of infiniteScroll to "complete" */ waitFor(action: Promise): void; /** * Call `enable(false)` to disable the infinite scroll from actively * trying to receive new data while scrolling. This method is useful * when it is known that there is no more data that can be added, and * the infinite scroll is no longer needed. * @param {boolean} shouldEnable If the infinite scroll should be * enabled or not. Setting to `false` will remove scroll event listeners * and hide the display. */ enable(shouldEnable: boolean): void; /** * @hidden */ _setListeners(shouldListen: boolean): void; /** * @hidden */ ngAfterContentInit(): void; /** * @hidden */ ngOnDestroy(): void; }