javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +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.d.ts vendored
View File

@ -2693,7 +2693,7 @@ declare global {
*/
'complete': () => void;
/**
* 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 when it is known that there is no more data that can be added, and the infinite scroll is no longer needed.
* If true, the infinite scroll will be hidden and scroll event listeners will be removed. 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.
*/
'disabled': boolean;
/**
@ -2731,7 +2731,7 @@ declare global {
namespace JSXElements {
export interface IonInfiniteScrollAttributes extends HTMLAttributes {
/**
* 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 when it is known that there is no more data that can be added, and the infinite scroll is no longer needed.
* If true, the infinite scroll will be hidden and scroll event listeners will be removed. 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.
*/
'disabled'?: boolean;
/**

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;
}
```