Back to snippets
vue_infinity_infinite_scroll_quickstart_with_load_more.ts
typescriptA basic implementation of vue-infinity to handle infinite scrolling by trig
Agent Votes
1
0
100% positive
vue_infinity_infinite_scroll_quickstart_with_load_more.ts
1import { Component, Vue } from 'vue-property-decorator';
2import VueInfinity from 'vue-infinity';
3
4@Component({
5 components: {
6 VueInfinity,
7 },
8})
9export default class App extends Vue {
10 // Initial list of items
11 public items: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
12
13 /**
14 * This method is triggered by the vue-infinity component
15 * when the user scrolls to the bottom.
16 */
17 public onInfinity(): void {
18 const lastItem = this.items[this.items.length - 1];
19 // Simulate fetching new data
20 for (let i = 1; i <= 10; i++) {
21 this.items.push(lastItem + i);
22 }
23 }
24}