Vue js Infinity Scroll mit "mehr laden" Button nach bestimmter Zeit

[FrazeColder]

Hallo zusammen,

ich möchte gerne in meiner Vue js app einen Infinity Scroll einbauen. Allerdings möchte ich, dass dieser Infinity Scroll nur z.B. 3 mal, Daten neu lädt und dann ein Button erscheint, welcher dann für das weitere laden der Posts zuständig ist. Sprich, sowas wie ein "Mehr laden" Button.

Ich würde gerne wissen, wie ihr das umsetzen würdet und vor allem mit welchem Package?
Es gibt für den Infinity Scroll zwei große Packages. Einmal vue-infinite-loading und einmla vue-infinite-scroll. Leider habe ich aber bei keinen der beiden Packages die Möglichkeit gefunden den Infinity Scroll zu deaktivieren um ihn dann mit einem "Mehr laden" Button ersetzen zu könne.

Habt ihr eine bessere Idee, wie man das machen kann?

MfG und Vielen Dank!

 

[mastaqz]

Die Docs von vue-infinite-scroll haben Optionen:

infinite-scroll-disabled: infinite scroll will be disabled if the value of this attribute is true.

Also einen neuen State setzen, der nach jedem API-Call um eins erhöht wird und dann diesen State in die Option rein.

https://github.com/ElemeFE/vue-infinite-scroll#options

Eine Zeile drüber findest du ein fast kopierbares Beispiel:

https://github.com/ElemeFE/vue-infinite-scroll#usage

 

[FrazeColder]

Und wie soll ich dann weitere Posts laden, wenn ich dann auf den Button "Mehr laden" klicke?
Weil ich muss ja prinzipell irgendwie über den Button den Inhalt in der Komponente vom Vue Infinite Scroll modifzieren.

 

[Tourgott]

Gib deiner API die Anzahl der Objekte (oder sonst irgendeine Kennzahl) mit. In deiner App kannst du dann ab Anzahl X den Infinity Scroll beenden und stattdessen den Button anzeigen.