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?


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


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


Log in to reply