Is Ons-lazy-repeat with infiniteScroll possible? (Vue.js)
-
Hi,
Has anybody been successfully able to use ons-lazy-repeat with infiniteScroll
<template> <v-ons-page :infiniteScroll='getData'> <p style="text-align: center"> <v-ons-row> <v-ons-col v-for='img in listItems'><v-ons-card><img :src='img' alt="Onsen UI" style="width: 150px;height: 200px"></v-ons-card></v-ons-col> </v-ons-row> </p> </v-ons-page> </template>
I am getting URL list of images from API call. I would like to make the above grid run in lazy-repeat to make it more efficient. First is it possible? Second please give a small demo code/ example where the same behavior can be demonstrated?
-
@nipun.kr please refer to this repo. I didn’t understand if you need a “load more” type of infinite scroll or really a lazy-repeat, because you’re not using
<v-ons-lazy-repeat>
at all in your example. In any case that example I pointed you to has code for both (seesrc/pages/InfiniteScroll.vue
).
-
@nipun-kr Do you want to add more items to
listItems
and also apply lazy scrolling at the same time? I think you can achieve that only withv-ons-lazy-repeat
component. In the item constructorrenderItem
you can check if the current index is close to the last one and make a request for more items (but return that new item synchronously). Remember to update lazy repeat’slength
prop once the request is done.