Stop handler / infinite scroll

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

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

    if (listHeight > containerHeight) {
    else {

    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.

  • Is this the way i would then stop it?


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

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

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

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

  • @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?

  • 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) {
        // Entries are initially loaded, but there are no entries available, done
        } else if (!this.entriesMeta) {
        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)
            .then(response => {
              let newEntries = this.entries.concat(
              this.entries = newEntries
              this.entriesMeta =
              // Indicate that data has been loaded successfully.
        } else {
          // No more data available to fetch.
          // Passing true to the callback function tells the infinite scroll component to stop loading.

Log in to reply