Infinite Scroll + External json Problem

I really like this infinite scroll feature. Infinite Scroll | Framework7 Documentation

in real life case, im trying to do “load more” on scroll content and instead, of array as shown on the documentation, the data would be from external json. (with the help of php to get data from mysql.)

Im trying to do something like this:

can anyone help me how to do this using f7 core js. not vue or any js framework.
i really appreciate if you do. thank you.

Please provide your attempt (with codesandbox)

i have spent whole day and mornight trying to figure out how to use the infinite scroll in actual application by loading json more data on scroll but no luck. i feel like im giving up. sigh

here => sparkling-butterfly-v7iu4d - CodeSandbox

I copied-pasted the codes and this is what i was looking for.
although, the codes are a bit hardcore like very complex.
but ill try to study the codes. thank you;