Simple usage with just an array ?

[NeroN7F]

I have large set of items which must be rendered as the grid which wrapped intro array. Can i simply indicate it to pageSize & pageProvider ?

[rocwang]

Yes, you simply set pageSize to a random number, say 20, then return the next 20 items from your array each time the pageProvider is called.

[NeroN7F]

Sorry, didnt got that.

Axios fetching data from the api into the infinite scroll array, which I use for pageProvider

 <Grid :length="productItems.length" :pageSize="productItems.length" :pageProvider="pageProvider" class="grid">  
 
 let pageProvider =  () => {
        return productItems
    }

Which throws an error :

Uncaught RangeError: Invalid array length at accumulateAllItems

Why it doesnt accepts the value & length ?

[rocwang]

By just looking at your code snippet, I can see:

• pageProvider need to returns a Promise of Array, not the Array itself.
• Axios fetches data in a async way, so you might need to set productItems to be some default / empty array before you get the ressponse from Axios?

The way I'd implement it would be something like:

1. Fetch the list of items using Axios
2. As pageProivder is defined as (pageNumber: number, pageSize: number) => Promise<unknown[]>, we can use the pageNumber, and pageSize to slice the list of items, and return that slice only. e.g. list.slice(pageNumber * pageSize, (pageNumber+1) * pageSize

[NeroN7F]

@rocwang