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

docs(infinite-scroll): update docs for disabling infinite scroll

Browse Source 
updates the breaking changes, usage, and test

closes #14908
This commit is contained in:
Brandy Carney
2018-07-27 14:53:15 -04:00
parent ae47763bbe
commit b91a7069b2
6 changed files with 110 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/infinite-scroll/infinite-scroll.tsx
View File

@ -47,8 +47,8 @@ export class InfiniteScroll {
* If true, the infinite scroll will be hidden and scroll event listeners
* will be removed.
*
* Call `enable(false)` to disable the infinite scroll from actively
* trying to receive new data while scrolling. This method is useful
* Set this to true to disable the infinite scroll from actively
* trying to receive new data while scrolling. This is useful
* when it is known that there is no more data that can be added, and
* the infinite scroll is no longer needed.
*/

6
core/src/components/infinite-scroll/test/basic/index.html
View File

@ -21,13 +21,11 @@
<ion-content id="content" padding>
<ion-button onclick="toggleInfiniteScroll()" block>
<ion-button onclick="toggleInfiniteScroll()" expand="block">
Toggle InfiniteScroll
</ion-button>
<ion-list id="list">
</ion-list>
<ion-list id="list"></ion-list>
<ion-infinite-scroll threshold="100px" id="infinite-scroll">
<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">

39
core/src/components/infinite-scroll/usage/angular.md
View File

@ -1,13 +1,18 @@
```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>
<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
@ -19,13 +24,25 @@ import { Component } from '@angular/core';
styleUrls: ['./infinite-scroll-example.css']
})
export class InfiniteScrollExample {
@ViewChild(InfiniteScroll) infiniteScroll: InfiniteScroll;
constructor() {}
loadData(event) {
setTimeout(function() {
setTimeout(() => {
console.log('Done');
event.target.complete();
}, 2000);
// 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;
}
}
```

35
core/src/components/infinite-scroll/usage/javascript.md
View File

@ -1,13 +1,18 @@
```html
<ion-content id="content">
<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>
<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
@ -17,6 +22,16 @@ infiniteScroll.addEventListener('ionInfinite', function(event) {
setTimeout(function() {
console.log('Done');
event.target.complete();
}, 2000);
// 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;
}
```