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)
nipun.kr last edited by
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?
misterjunio Onsen UI last edited by
@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 (see
@nipun-kr Do you want to add more items to
listItemsand also apply lazy scrolling at the same time? I think you can achieve that only with
v-ons-lazy-repeatcomponent. In the item constructor
renderItemyou 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’s
lengthprop once the request is done.