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

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)

  • N

    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?

    0 1 Reply
  • Onsen UI

    @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).

    0
  • Onsen UI

    @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.

    0