Stop handler / infinite scroll

Epo

Hi,

i use infinite scroll in combination with qlist/qitem for building a dynamic list of entries.

If the list is long enough to fill the whole screen everything works fine, but what i have to do when i got e.g. only one entry and the infinite scroll is calling the handler over and over again? How i can react or stop this?

spectrolite

I would compare the height of the list with the height of the container.

if (listHeight > containerHeight) {
  activateInfiniteScroll()
}
else {
  deactivateInfiniteScroll()
}

I haven’t fiddled much with scroll yet, but I think this should point you in the right direction, or at least start a useful discussion.

Epo

Is this the way i would then stop it?

this.$refs.infiniteScroll.stop()

<q-infinite-scroll :handler=“refresher” ref=“infiniteScroll”>
.
.
.

spectrolite

Yup, as far as I can deduce from the docs, Razvan made it real easy for us with the stop() and resume()methods, and your usage of ref to get the vue methods working seems correct.

a47ae

Small tip, you should be able to call the done() method with true as a parameter like so done(true). This should stop the infinite scroll component from loading more entries (It’s basically the same as call stop() by yourself, but for me it was cleaner to use it this way when I know that I fetched all data)

Epo

Ohhhh - that´s a nice one - thx a47ae. As you said it´s more cleaner and removed some error i was getting sometimes with .stop()

spectrolite

@Epo Great to hear you got it working well.
Would you consider sharing a few lines of code so future readers can get a clear view of the best solution?

a47ae

So small snippet from the code I use when handling paginated data (might not be optimal but works as expected).
So the initial entries are loaded in the created or beforeRouteEnter hook.
Then I check if there are any entries at all if not, I indicate that the infinite scroll should stop.
On the next calls, I compare the current page I am on with the max number of pages and if I reached the maximum I stop.

fetchNextContactChunk (done) {
    // Entries are not yet initially loaded, can not fetch next chunk
    if (!this.entriesLoaded) {
      done()
      return
    // Entries are initially loaded, but there are no entries available, done
    } else if (!this.entriesMeta) {
      done(true)
    }

    let currentPage = this.entriesMeta.pagination.current_page
    let totalPages = this.entriesMeta.pagination.total_pages

    // Check if there is still a chunk to fetch available.
    if (currentPage < totalPages) {
      new EntriesClient()
        .page(currentPage + 1)
        .list()
        .then(response => {
          let newEntries = this.entries.concat(response.data.data)

          this.entries = newEntries
          this.entriesMeta = response.data.meta

          // Indicate that data has been loaded successfully.
          done()
        })
    } else {
      // No more data available to fetch.
      // Passing true to the callback function tells the infinite scroll component to stop loading.
      done(true)
    }
  }

No More Posting New Topics!

Stop handler / infinite scroll