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

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

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