infinite-scroll.d.ts 6.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. import { ElementRef, EventEmitter, NgZone } from '@angular/core';
  2. import { Content, ScrollEvent } from '../content/content';
  3. import { DomController } from '../../platform/dom-controller';
  4. /**
  5. * @name InfiniteScroll
  6. * @description
  7. * The Infinite Scroll allows you to perform an action when the user
  8. * scrolls a specified distance from the bottom or top of the page.
  9. *
  10. * The expression assigned to the `infinite` event is called when
  11. * the user scrolls to the specified distance. When this expression
  12. * has finished its tasks, it should call the `complete()` method
  13. * on the infinite scroll instance.
  14. *
  15. * @usage
  16. * ```html
  17. * <ion-content>
  18. *
  19. * <ion-list>
  20. * <ion-item *ngFor="let i of items">{% raw %}{{i}}{% endraw %}</ion-item>
  21. * </ion-list>
  22. *
  23. * <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
  24. * <ion-infinite-scroll-content></ion-infinite-scroll-content>
  25. * </ion-infinite-scroll>
  26. *
  27. * </ion-content>
  28. * ```
  29. *
  30. * ```ts
  31. * @Component({...})
  32. * export class NewsFeedPage {
  33. * items = [];
  34. *
  35. * constructor() {
  36. * for (let i = 0; i < 30; i++) {
  37. * this.items.push( this.items.length );
  38. * }
  39. * }
  40. *
  41. * doInfinite(infiniteScroll) {
  42. * console.log('Begin async operation');
  43. *
  44. * setTimeout(() => {
  45. * for (let i = 0; i < 30; i++) {
  46. * this.items.push( this.items.length );
  47. * }
  48. *
  49. * console.log('Async operation has ended');
  50. * infiniteScroll.complete();
  51. * }, 500);
  52. * }
  53. *
  54. * }
  55. * ```
  56. *
  57. * ## `waitFor` method of InfiniteScroll
  58. *
  59. * In case if your async operation returns promise you can utilize
  60. * `waitFor` method inside your template.
  61. *
  62. * ```html
  63. * <ion-content>
  64. *
  65. * <ion-list>
  66. * <ion-item *ngFor="let item of items">{{item}}</ion-item>
  67. * </ion-list>
  68. *
  69. * <ion-infinite-scroll (ionInfinite)="$event.waitFor(doInfinite())">
  70. * <ion-infinite-scroll-content></ion-infinite-scroll-content>
  71. * </ion-infinite-scroll>
  72. *
  73. * </ion-content>
  74. * ```
  75. *
  76. * ```ts
  77. * @Component({...})
  78. * export class NewsFeedPage {
  79. * items = [];
  80. *
  81. * constructor() {
  82. * for (var i = 0; i < 30; i++) {
  83. * this.items.push( this.items.length );
  84. * }
  85. * }
  86. *
  87. * doInfinite(): Promise<any> {
  88. * console.log('Begin async operation');
  89. *
  90. * return new Promise((resolve) => {
  91. * setTimeout(() => {
  92. * for (var i = 0; i < 30; i++) {
  93. * this.items.push( this.items.length );
  94. * }
  95. *
  96. * console.log('Async operation has ended');
  97. * resolve();
  98. * }, 500);
  99. * })
  100. * }
  101. * }
  102. * ```
  103. *
  104. * ## Infinite Scroll Content
  105. *
  106. * By default, Ionic uses the infinite scroll spinner that looks
  107. * best for the platform the user is on. However, you can change the
  108. * default spinner or add text by adding properties to the
  109. * `ion-infinite-scroll-content` component.
  110. *
  111. * ```html
  112. * <ion-content>
  113. *
  114. * <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
  115. * <ion-infinite-scroll-content
  116. * loadingSpinner="bubbles"
  117. * loadingText="Loading more data...">
  118. * </ion-infinite-scroll-content>
  119. * </ion-infinite-scroll>
  120. *
  121. * </ion-content>
  122. * ```
  123. *
  124. *
  125. * ## Further Customizing Infinite Scroll Content
  126. *
  127. * The `ion-infinite-scroll` component holds the infinite scroll logic.
  128. * It requires a child component in order to display the content.
  129. * Ionic uses `ion-infinite-scroll-content` by default. This component
  130. * displays the infinite scroll and changes the look depending
  131. * on the infinite scroll's state. Separating these components allows
  132. * developers to create their own infinite scroll content components.
  133. * You could replace our default content with custom SVG or CSS animations.
  134. *
  135. * @demo /docs/demos/src/infinite-scroll/
  136. *
  137. */
  138. export declare class InfiniteScroll {
  139. private _content;
  140. private _zone;
  141. private _elementRef;
  142. private _dom;
  143. _lastCheck: number;
  144. _highestY: number;
  145. _scLsn: any;
  146. _thr: string;
  147. _thrPx: number;
  148. _thrPc: number;
  149. _position: string;
  150. _init: boolean;
  151. /**
  152. * @internal
  153. */
  154. state: string;
  155. /**
  156. * @input {string} The threshold distance from the bottom
  157. * of the content to call the `infinite` output event when scrolled.
  158. * The threshold value can be either a percent, or
  159. * in pixels. For example, use the value of `10%` for the `infinite`
  160. * output event to get called when the user has scrolled 10%
  161. * from the bottom of the page. Use the value `100px` when the
  162. * scroll is within 100 pixels from the bottom of the page.
  163. * Default is `15%`.
  164. */
  165. threshold: string;
  166. /**
  167. * @input {boolean} If true, Whether or not the infinite scroll should be
  168. * enabled or not. Setting to `false` will remove scroll event listeners
  169. * and hide the display.
  170. */
  171. enabled: boolean;
  172. /**
  173. * @input {string} The position of the infinite scroll element.
  174. * The value can be either `top` or `bottom`.
  175. * Default is `bottom`.
  176. */
  177. position: string;
  178. /**
  179. * @output {event} Emitted when the scroll reaches
  180. * the threshold distance. From within your infinite handler,
  181. * you must call the infinite scroll's `complete()` method when
  182. * your async operation has completed.
  183. */
  184. ionInfinite: EventEmitter<InfiniteScroll>;
  185. constructor(_content: Content, _zone: NgZone, _elementRef: ElementRef, _dom: DomController);
  186. _onScroll(ev: ScrollEvent): 1 | 2 | 3 | 5 | 6;
  187. /**
  188. * Call `complete()` within the `infinite` output event handler when
  189. * your async operation has completed. For example, the `loading`
  190. * state is while the app is performing an asynchronous operation,
  191. * such as receiving more data from an AJAX request to add more items
  192. * to a data list. Once the data has been received and UI updated, you
  193. * then call this method to signify that the loading has completed.
  194. * This method will change the infinite scroll's state from `loading`
  195. * to `enabled`.
  196. */
  197. complete(): void;
  198. /**
  199. * Pass a promise inside `waitFor()` within the `infinite` output event handler in order to
  200. * change state of infiniteScroll to "complete"
  201. */
  202. waitFor(action: Promise<any>): void;
  203. /**
  204. * Call `enable(false)` to disable the infinite scroll from actively
  205. * trying to receive new data while scrolling. This method is useful
  206. * when it is known that there is no more data that can be added, and
  207. * the infinite scroll is no longer needed.
  208. * @param {boolean} shouldEnable If the infinite scroll should be
  209. * enabled or not. Setting to `false` will remove scroll event listeners
  210. * and hide the display.
  211. */
  212. enable(shouldEnable: boolean): void;
  213. /**
  214. * @hidden
  215. */
  216. _setListeners(shouldListen: boolean): void;
  217. /**
  218. * @hidden
  219. */
  220. ngAfterContentInit(): void;
  221. /**
  222. * @hidden
  223. */
  224. ngOnDestroy(): void;
  225. }