Virtual list loading data from server as user scrolls

jacobg · December 12, 2018, 4:15pm

With a Vue virtual list, what is the best way to load hook into an scroll event to load more data from server as user scrolls down? I don’t see any exact documentation for this scenario, but I did see some code for a simple list with infinite scroll in Vue:

github.com

framework7io/framework7/blob/a4a0748298a6512135e3a7cc69563ab97be96c4e/kitchen-sink/vue/src/pages/infinite-scroll.vue

<template>
  <f7-page infinite :infinite-distance="50" :infinite-preloader="showPreloader" @infinite="loadMore">
    <f7-navbar title="Infinite Scroll" back-link="Back"></f7-navbar>
    <f7-block-title>Scroll bottom</f7-block-title>
    <f7-list>
      <f7-list-item v-for="(item, index) in items" :title="`Item ${item}`" :key="index"></f7-list-item>
    </f7-list>
  </f7-page>
</template>
<script>
  import { f7Navbar, f7Page, f7BlockTitle, f7List, f7ListItem } from 'framework7-vue';

  export default {
    components: {
      f7Navbar,
      f7Page,
      f7BlockTitle,
      f7List,
      f7ListItem,
    },

This file has been truncated. show original

I tried the same thing with virtual list, but the infinite event is not firing.

There’s also documentation on infinite scroll includes a list example hooking into:

$$('.infinite-scroll-content').on('infinite', ...

But it’s not a Vue pattern.

Is there a way to hook into the event directly onto the list?

nolimits4web · December 12, 2018, 5:38pm

Yes, use infinite scroll + Vl’s API appendItems or replaceAllItems http://framework7.io/docs/virtual-list.html#virtual-list-methods-properties

jacobg · December 12, 2018, 6:27pm

The infinite event is not firing, even if I remove virtual list directive from the list. The page is inside a popup, so I’m not sure if that’s supported?

nolimits4web · December 12, 2018, 6:30pm

It will be inititialised if it is inside initialized View, otherwise enable it with infinite api http://framework7.io/docs/infinite-scroll.html#infinite-scroll-app-methods

jacobg · December 12, 2018, 6:43pm

Ah yes. I had to do this:

this.$f7.infiniteScroll.create(this.$el.querySelector('.infinite-scroll-content'))

Why does auto-initialization of infinite scrolling require a view? Is it possible for the infinite directive to do that?