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(vue): add infinite scroll examples (#22317)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-10-14 15:41:46 -04:00
committed by GitHub
parent dcdb7b6f4e
commit 6be8b8d89d
4 changed files with 248 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -193,6 +193,104 @@ export class InfiniteScrollExample {
```
### Vue
```html
<template>
<ion-page>
<ion-content class="ion-padding">
<ion-button @click="toggleInfiniteScroll" expand="block">
Toggle Infinite Scroll
</ion-button>
<ion-list>
<ion-item v-for="item in items" :key="item">
<ion-label>{{ item }}</ion-label>
</ion-item>
</ion-list>
<ion-infinite-scroll
@ionInfinite="loadData($event)"
threshold="100px"
id="infinite-scroll"
:disabled="isDisabled"
>
<ion-infinite-scroll-content
loading-spinner="bubbles"
loading-text="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import {
IonButton,
IonContent,
IonInfiniteScroll,
IonInfiniteScrollContent,
IonItem,
IonLabel,
IonList,
IonPage
} from '@ionic/vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
components: {
IonButton,
IonContent,
IonInfiniteScroll,
IonInfiniteScrollContent,
IonItem,
IonLabel,
IonList,
IonPage
},
setup() {
const isDisabled = ref(false);
const toggleInfiniteScroll = () => {
isDisabled.value = !isDisabled.value;
}
const items = ref([]);
const pushData = () => {
const max = items.value.length + 20;
const min = max - 20;
for (let i = min; i < max; i++) {
items.value.push(i);
}
}
const loadData = (ev: CustomEvent) => {
setTimeout(() => {
pushData();
console.log('Loaded data');
ev.target.complete();
// App logic to determine if all data is loaded
// and disable the infinite scroll
if (items.value.length == 1000) {
ev.target.disabled = true;
}
}, 500);
}
pushData();
return {
isDisabled,
toggleInfiniteScroll,
loadData,
items
}
}
});
</script>
```
## Properties

94
core/src/components/infinite-scroll/usage/vue.md Normal file
View File

@ -0,0 +1,94 @@
```html
<template>
<ion-page>
<ion-content class="ion-padding">
<ion-button @click="toggleInfiniteScroll" expand="block">
Toggle Infinite Scroll
</ion-button>
<ion-list>
<ion-item v-for="item in items" :key="item">
<ion-label>{{ item }}</ion-label>
</ion-item>
</ion-list>
<ion-infinite-scroll
@ionInfinite="loadData($event)"
threshold="100px"
id="infinite-scroll"
:disabled="isDisabled"
>
<ion-infinite-scroll-content
loading-spinner="bubbles"
loading-text="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import {
IonButton,
IonContent,
IonInfiniteScroll,
IonInfiniteScrollContent,
IonItem,
IonLabel,
IonList,
IonPage
} from '@ionic/vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
components: {
IonButton,
IonContent,
IonInfiniteScroll,
IonInfiniteScrollContent,
IonItem,
IonLabel,
IonList,
IonPage
},
setup() {
const isDisabled = ref(false);
const toggleInfiniteScroll = () => {
isDisabled.value = !isDisabled.value;
}
const items = ref([]);
const pushData = () => {
const max = items.value.length + 20;
const min = max - 20;
for (let i = min; i < max; i++) {
items.value.push(i);
}
}
const loadData = (ev: CustomEvent) => {
setTimeout(() => {
pushData();
console.log('Loaded data');
ev.target.complete();
// App logic to determine if all data is loaded
// and disable the infinite scroll
if (items.value.length == 1000) {
ev.target.disabled = true;
}
}, 500);
}
pushData();
return {
isDisabled,
toggleInfiniteScroll,
loadData,
items
}
}
});
</script>
```