Is Ons-lazy-repeat with infiniteScroll possible? (Vue.js)

nipun.kr

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?

misterjunio

@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 src/pages/InfiniteScroll.vue).

Fran Diox

@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 with v-ons-lazy-repeat component. In the item constructor renderItem 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’s length prop once the request is done.