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

chore(): update stencil (#16506)

Browse Source
This commit is contained in:
Manu MA
2018-11-29 18:54:51 +01:00
committed by GitHub
parent aa61e818a5
commit 6b7f8ae201
66 changed files with 5696 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,6 +15,103 @@ Separating the `ion-infinite-scroll` and `ion-infinite-scroll-content` component
<!-- Auto Generated Below -->
## Usage
### Angular
```html
<ion-content>
<ion-button (click)="toggleInfiniteScroll()" expand="block">
Toggle Infinite Scroll
</ion-button>
<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, ViewChild } from '@angular/core';
import { InfiniteScroll } from '@ionic/angular';
@Component({
selector: 'infinite-scroll-example',
templateUrl: 'infinite-scroll-example.html',
styleUrls: ['./infinite-scroll-example.css']
})
export class InfiniteScrollExample {
@ViewChild(InfiniteScroll) infiniteScroll: InfiniteScroll;
constructor() {}
loadData(event) {
setTimeout(() => {
console.log('Done');
event.target.complete();
// App logic to determine if all data is loaded
// and disable the infinite scroll
if (data.length == 1000) {
event.target.disabled = true;
}
}, 500);
}
toggleInfiniteScroll() {
infiniteScroll.disabled = !infiniteScroll.disabled;
}
}
```
### Javascript
```html
<ion-content>
<ion-button onclick="toggleInfiniteScroll()" expand="block">
Toggle Infinite Scroll
</ion-button>
<ion-list></ion-list>
<ion-infinite-scroll threshold="100px" id="infinite-scroll">
<ion-infinite-scroll-content
loading-spinner="bubbles"
loading-text="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();
// App logic to determine if all data is loaded
// and disable the infinite scroll
if (data.length == 1000) {
event.target.disabled = true;
}
}, 500);
});
function toggleInfiniteScroll() {
infiniteScroll.disabled = !infiniteScroll.disabled;
}
```
## Properties
| Property | Attribute | Description | Type | Default |