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

docs(): update usage and examples

Browse Source
This commit is contained in:
mhartington
2018-05-30 16:51:54 -04:00
parent 62755f3824
commit 89a7d169e9
31 changed files with 693 additions and 444 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
core/src/components/infinite-scroll/readme.md
View File

@ -3,101 +3,11 @@
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 expression assigned to the `ionInfinite` 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.
```html
<ion-content>
<ion-list>
<ion-item *ngFor="let i of items">{% raw %}{{i}}{% endraw %}</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
```
```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
<ion-content>
<ion-list>
<ion-item *ngFor="let item of items">{{item}}</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="$event.waitFor(doInfinite())">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
```
```ts
@Component({...})
export class NewsFeedPage {
items = [];
constructor() {
for (var i = 0; i < 30; i++) {
this.items.push( this.items.length );
}
}
doInfinite(): Promise<any> {
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
@ -105,20 +15,6 @@ 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
<ion-content>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
```
## Further Customizing Infinite Scroll Content
The `ion-infinite-scroll` component holds the infinite scroll logic.
@ -129,7 +25,6 @@ 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.
<!-- Auto Generated Below -->

31
core/src/components/infinite-scroll/usage/angular.md Normal file
View File

@ -0,0 +1,31 @@
```html
<ion-content id="content">
<ion-list></ion-list>
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
```
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'infinite-scroll-example',
templateUrl: 'infinite-scroll-example.html',
styleUrls: ['./infinite-scroll-example.css']
})
export class InfiniteScrollExample {
constructor() {}
loadData(event) {
setTimeout(function() {
console.log('Done');
event.target.complete();
}, 2000);
}
}
```

22
core/src/components/infinite-scroll/usage/javascript.md Normal file
View File

@ -0,0 +1,22 @@
```html
<ion-content id="content">
<ion-list></ion-list>
<ion-infinite-scroll threshold="100px" id="infinite-scroll">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
```
```javascript
const infiniteScroll = document.getElementById('infinite-scroll');
infiniteScroll.addEventListener('ionInfinite', function(event) {
setTimeout(function() {
console.log('Done');
event.target.complete();
}, 2000);
});
```