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

docs(react): add examples for infinite scroll (#24130)

Browse Source
This commit is contained in:
Liam DeBeasi
2021-10-28 16:23:26 -04:00
committed by GitHub
parent 8605c467d1
commit 794bfbbc57
4 changed files with 230 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,10 +2,6 @@
The `ion-infinite-scroll-content` component is the default child used by the `ion-infinite-scroll`. It displays an infinite scroll spinner that looks best based on the platform and changes the look depending on the infinite scroll's state. The default spinner can be changed and text can be added by setting the `loadingSpinner` and `loadingText` properties.
## React
The `ion-infinite-scroll-content` component is not supported in React.
<!-- Auto Generated Below -->
@ -39,6 +35,25 @@ The `ion-infinite-scroll-content` component is not supported in React.
```
### React
```tsx
import React from 'react';
import { IonContent, IonInfiniteScroll, IonInfiniteScrollContent } from '@ionic/react';
export const InfiniteScrollExample: React.FC = () => (
<IonContent>
<IonInfiniteScroll>
<IonInfiniteScrollContent
loadingSpinner="bubbles"
loadingText="Loading more data...">
</IonInfiniteScrollContent>
</IonInfiniteScroll>
</IonContent>
);
```
### Stencil
```tsx

15
core/src/components/infinite-scroll-content/usage/react.md Normal file
View File

@ -0,0 +1,15 @@
```tsx
import React from 'react';
import { IonContent, IonInfiniteScroll, IonInfiniteScrollContent } from '@ionic/react';
export const InfiniteScrollExample: React.FC = () => (
<IonContent>
<IonInfiniteScroll>
<IonInfiniteScrollContent
loadingSpinner="bubbles"
loadingText="Loading more data...">
</IonInfiniteScrollContent>
</IonInfiniteScroll>
</IonContent>
);
```

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

@ -111,6 +111,106 @@ function toggleInfiniteScroll() {
```
### React
```tsx
import {
IonButton,
IonContent,
IonHeader,
IonInfiniteScroll,
IonInfiniteScrollContent,
IonItem,
IonLabel,
IonList,
IonPage,
IonTitle,
IonToolbar,
useIonViewWillEnter
} from '@ionic/react';
import { useState } from 'react';
import ExploreContainer from '../components/ExploreContainer';
import './Home.css';
const InfiniteScrollExample: React.FC = () => {
const [data, setData] = useState<string[]>([]);
const [isInfiniteDisabled, setInfiniteDisabled] = useState(false);
const pushData = () => {
const max = data.length + 20;
const min = max - 20;
const newData = [];
for (let i = min; i < max; i++) {
newData.push('Item' + i);
}
setData([
...data,
...newData
]);
}
const loadData = (ev: any) => {
setTimeout(() => {
pushData();
console.log('Loaded data');
ev.target.complete();
if (data.length == 1000) {
setInfiniteDisabled(true);
}
}, 500);
}
useIonViewWillEnter(() => {
pushData();
});
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Blank</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Blank</IonTitle>
</IonToolbar>
</IonHeader>
<IonButton onClick={() => setInfiniteDisabled(!isInfiniteDisabled)} expand="block">
Toggle Infinite Scroll
</IonButton>
<IonList>
{data.map((item, index) => {
return (
<IonItem key={index}>
<IonLabel>{item}</IonLabel>
</IonItem>
)
})}
</IonList>
<IonInfiniteScroll
onIonInfinite={loadData}
threshold="100px"
disabled={isInfiniteDisabled}
>
<IonInfiniteScrollContent
loadingSpinner="bubbles"
loadingText="Loading more data..."
></IonInfiniteScrollContent>
</IonInfiniteScroll>
</IonContent>
</IonPage>
);
};
export default InfiniteScrollExample;
```
### Stencil
```tsx

96
core/src/components/infinite-scroll/usage/react.md Normal file
View File

@ -0,0 +1,96 @@
```tsx
import {
IonButton,
IonContent,
IonHeader,
IonInfiniteScroll,
IonInfiniteScrollContent,
IonItem,
IonLabel,
IonList,
IonPage,
IonTitle,
IonToolbar,
useIonViewWillEnter
} from '@ionic/react';
import { useState } from 'react';
import ExploreContainer from '../components/ExploreContainer';
import './Home.css';
const InfiniteScrollExample: React.FC = () => {
const [data, setData] = useState<string[]>([]);
const [isInfiniteDisabled, setInfiniteDisabled] = useState(false);
const pushData = () => {
const max = data.length + 20;
const min = max - 20;
const newData = [];
for (let i = min; i < max; i++) {
newData.push('Item' + i);
}
setData([
...data,
...newData
]);
}
const loadData = (ev: any) => {
setTimeout(() => {
pushData();
console.log('Loaded data');
ev.target.complete();
if (data.length == 1000) {
setInfiniteDisabled(true);
}
}, 500);
}
useIonViewWillEnter(() => {
pushData();
});
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Blank</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Blank</IonTitle>
</IonToolbar>
</IonHeader>
<IonButton onClick={() => setInfiniteDisabled(!isInfiniteDisabled)} expand="block">
Toggle Infinite Scroll
</IonButton>
<IonList>
{data.map((item, index) => {
return (
<IonItem key={index}>
<IonLabel>{item}</IonLabel>
</IonItem>
)
})}
</IonList>
<IonInfiniteScroll
onIonInfinite={loadData}
threshold="100px"
disabled={isInfiniteDisabled}
>
<IonInfiniteScrollContent
loadingSpinner="bubbles"
loadingText="Loading more data..."
></IonInfiniteScrollContent>
</IonInfiniteScroll>
</IonContent>
</IonPage>
);
};
export default InfiniteScrollExample;
```