vuelscroller
v1.0.0
Published
#### Vue component designed for efficient content rendering and dynamic loading based on various strategies. Below is a detailed overview of its features and usage:
Downloads
10
Maintainers
Readme
Vue Virtual Api Scroller
Vue component designed for efficient content rendering and dynamic loading based on various strategies. Below is a detailed overview of its features and usage:
API Request & Render
<VuelScroller
:api="{
requestUrl: 'https://localhost:44336/api/get/',
requestStrategy: 'slash', // 'slash' | 'query
queryNames: { qty: 'my-qty', offset: 'my-offset' }, // if query strategy has been chosen
listLength:getListLength(), // stops requesting when the list is exhausted.
}"
:settings="{
loadPerScroll:1, // number (default = 1)
initialQty:10 // initial objects qunatity to load,
}"
>
<template v-slot="{ item }">
// Loaded item template
</template>
<template #loading>
// place for your spinner - only for API MODE
</template>
</VuelScroller>
If you want to fetch objects from your API in addition to rendering, use the API object. You need to provide a requestUrl
, for example: https://yourpage.com/api/list/
. Depending on whether you choose 'slash' or 'query' strategy, your API requests will look like this: https://yourpage.com/api/list/5/50
or https://yourpage.com/api/list?qty=5&offset=50
. You can also override the query parameter names by setting queryNames
in the API object.
Render-Only
If your focus is solely on rendering, you can omit the API options and directly pass a full list of objects to items in renderOnly parameter.
<VuelScroller
:render-only="{
items: test
}"
:settings="{
loadPerScroll: 2,
initialQty:10
}"
>
<template v-slot="{ item }">
// Loaded item template
</template>
<template #loading>
// place for your spinner - only for API Mode
</template>
</VuelScroller>
Props:
renderOnly (optional):
- items: An optional array of items to display within the component. Only if you want to render a static list of items ( Render-Only mode ).
settings:
- loadPerScroll: Specifies how items are loaded during scrolling. Can be
"single"
or a number indicating the quantity of items to load per scroll event. - initialQty: Specifies the initial quantity of items to load.
- loadPerScroll: Specifies how items are loaded during scrolling. Can be
api (optional):
- requestUrl: The base URL for API requests.
- requestStrategy: Specifies the strategy for API requests, either
"slash"
for URL path parameters or"query"
for URL query parameters. - queryNames: Optional object specifying query parameter names for
"qty"
and"offset"
. - listLength: Stops requesting when the list is exhausted. If your list updates on-the-fly you may ignore 'listLength' parameter