Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
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.