Solvedvue infinite loading "loaded" doesn't stop loading

v2.1.3 - for some reason the "loaded" emit isn't stopping it from continuing to load results down the page. I'm pretty sure this was working before, but I can't figure out why this is happening.

So, basically even though I haven't scrolled down, it keeps hitting my server and loading more results. Here's my onInfinite function:

onInfinite () {
        api.tracks.get(PAGE_AMOUNT, this.tracks.length, tr => {
          console.log(`TRACKS: ${this.tracks.length}`)

          if (tr.length > 0) {
            this.tracks = this.tracks.concat(tr)
            if (tr.length < PAGE_AMOUNT) {
              this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete')
            } else {
              this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
            }
          } else {
            this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete')
          }
        })
      }

My template:

<template>
  <div id="track-list">
    <TrackItem v-for='(track, index) in tracks' :track='track' :index="index" :key='track.id'/>
    <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading" spinner="waveDots"></infinite-loading>
  </div>
</template>

I did put console logs in and it IS hitting that else where it sends the loaded emit. I also changed it to :complete and it stopped calling at that point in the code. So it is emitting, it just seems like its not caring - or for some reason it thinks that its scrolled down.

Anything I'm doing wrong? Or any ideas on how to debug it further?

50 Answers

✔️Accepted Answer

Hi all participants @DaveSanders @Akari1987 @PenAndPapers @rodwin @mcmillion @vbabenko @adamyarger @duyhung85 , I have no idea about how to find the real scroll parent, but this issue has been created for 2 months, so I plan to add a special property to solve it, looks like this:

<div infinite-wrapper>
  <div style="overflow: auto;">
    <infinite-loading force-use-infinite-wrapper="true"></infinite-loading>
  </div>
</div>

The special property called force-use-infinite-wrapper, it will find the closest parent node which has infinite-wrapper attribute, and it will ignore other parent node, even if some parents has overflow-y: auto|scroll CSS styles.

What do you think about the solution? And how about the attribute name force-use-infinite-wrapper?

Best regards.

Other Answers:

@vbabenko thanks for your appreciation! This plugin will calculate distance through the getBoundingClientRect().top of infinite-loading element and the getBoundingClientRect().bottom of scroll container, the distance is expected when the top - bottom <= the passing distance, but if the scroll container has automatic height, the distance will always be expected...

So I think should to add a additional condition to process it, I will as soon as possible.

Hi everyone, v2.2.0 has been released, include the force-use-infinite-wrapper feature, you can try it now, please feedback to here if you find any problem, thanks :D

I'm seeing this issue as well with VueJS 2.3.4. I'm also seeing it send out two events each time.

More Issues: