[Solved]Infinite Scroll @load="onLoad" keeps getting called when used inside Tab Panels.

[Zackery747]

Hello, I’m trying to use an infinite scroll inside tab panels. The main issues is the @load event to load more data. This event is being called infinite times after each other when placed inside the tab panels. It doesn’t wait for the user to scroll down and then load more data.

any suggestions to solve this issue will be much appreciated.

link to code pen: link text

    <q-tab-panels v-model="tabIndex" animated swipeable keep-alive>
      <q-tab-panel swipeable name="tab1" style="background: #17202A;">
        <q-infinite-scroll @load="onLoad" :offset="250">
          <div v-for="(item, index) in items" :key="index" class="caption">
            <p>Lorem ipsum dolor sit amet consectetur labore.</p>
          </div>
          <template v-slot:loading>
            <div class="row justify-center q-my-md">
              <q-spinner-dots color="primary" size="40px" ></q-spinner-dots>
            </div>
          </template>
        </q-infinite-scroll>
      </q-tab-panel>
    </q-tab-panels>
```**bolded text**

[metalsadman]

@Zackery747 you must set a height on your container, as mentioned here https://quasar.dev/vue-components/infinite-scroll#Usage

example : https://codepen.io/metalsadman/pen/KKKJKoK?editors=1111

[Zackery747]

@metalsadman Thank you for bringing that to my attention. It works perfectly now!

[Zackery747]

@metalsadman Really Dumb Question. What must I do if the onLoad method returns an empty list of data? Because I’m using the onLoad method to get data from a server. But when I return an empty list of data it just keeps loading and making calls one after another.

Basic mimic of what is happening : code pen example

[Zackery747]

@Zackery747 Found a solution. You only have to call this.$refs.infiniteScroll.stop() when the return data list is empty.

[jehadjaghoub]

Simply scroll-target=“body” on your eg : <q-infinite-scroll scroll-target=“body” … />

[katrine.hom]

@jehadjaghoub Thanks for the answer, it really helped me!