An infinite scroll plugin for Vue.js.

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?

¿Will SSR be supported?

ReferenceError: window is not defined at C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:12046 at C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:11978 at p.exports (C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:12264) at Object. (C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:12740) at e (C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:408) at Object.module.exports.render._h.staticClass (C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:9170) at e (C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:408) at Object. (C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:640) at e (C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:408) at p.__esModule.default (C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:496)

First of all, thank you for this awesome and easy-to-use component.

I'm trying to use infinite-loading with ElementUI's fixed-header table. It works fine with a regular table, but as I'm aware, the infinite-loading component needs to be a child of a scrollable element to work properly, which would not be the case if placed next to ElementUI's table component with a fixed header as it separates out the table-body wrapper.

Demo: https://jsfiddle.net/frya0fLz/

One of the solutions I thought of would be to have a slot inside the table-body wrapper, but had trouble trying it out.

Would it be possible to have infinite-loading component hook into the generated element of ElementUI's table?

Hi,

I'm using [email protected] and [email protected], and instead of getting the spinner while loading the content, im getting a text "undefined". Everything else works fine. What could be the culprit ?

Thanks.

On reaching the bottom, the event triggers multiple time so that the full list is loaded. Is there any particular reason for this? Looks like the plugin didn't get those new elements are added. It keeps on addng...

• fixed the bug infinite-loading dead loop when the direction is top

• add a infiniteWrapperClass prop to force infinite wrapper.

• fixed bug can not used with vue-class-component(ts)

Sorry I am too lazy to split them. So all in it.

Version

2.2.0

Vue.js version

2.4.4

What is exptected?

To not get this warning, as it was in version 2.1.3

What is actually happening?

I am getting a warning: [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

found in

--->

How to repreduce this problem?

Create a version using:

vue init webpack my-project

with runtime-only configuration.

code： loadMore: function () { console.log("loadMore") getChartDetail({id: this.charts[this.activeIndex]['id'],offset:this.chartsArray[this.activeIndex].length}).then(e=>{ this.chartsArray[this.activeIndex].push(...e.books) this.$refs.infiniteLoading&&this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded'); }).catch(e => { console.log(e) }) } first time it will work，but when i continue to scroll ,next time will produce error ‘_this.$refs.infiniteLoading.$emit is not a function’

Version

2.2.2

Vue.js version

2.4.2 (with nuxt 1.0.0-rc11)

What is expected?

infinite-loading should fire 'infinite' event as usual

What is actually happening?

the event is not fired anymore since 2.2.2 (working in 2.2.1)

How to reproduce this problem?

Use the component as usual, but the handler is never called:

<no-ssr>
  <InfiniteLoading @infinite="infiniteHandler"></InfiniteLoading>
</no-ssr>
...
methods: {
  infiniteHandler ($state) { console.log('never called') },
},

Version

2.2.1

Vue.js version

2.5.2

What is expected?

I expected to have the same result as the 'Basic use' of the module documentation https://peachscript.github.io/vue-infinite-loading/#!/getting-started/basic

What is actually happening?

The spinner doesn't disappear and the error message 'TypeError: Cannot read property '_withTask' of undefined' show up in the console of the browser (I use Chrome)

How to reproduce this problem?

I have install the module with npm and i use webpack for compiling my application. Did i need an extra configuration in webpack for the module ?

(Sorry for my bad english, i'm french ;))

Thanks for you library bringing convenience to my job. I encounter a situation that need support of loading from top of scroll element.As lack of feature in this library, I can only implement it by my own,really time wasting. I think this is quite a useful and necessary functionality.I just hope this library can be better and add it. Thanks again for your effort.

Version

2.4.5

Vue.js version

2.6.11

Description

I'm trying to use Vue infinite loading with a native, body scroll of the browser as presented in this demo.

The problem is that the data is loaded partially, but also recursively - what I mean is that on page load, even when I don't try to scroll, the infinite handler is triggered and it fetches the next data, but should not.

The afterwards logic calls $state.complete() after it fetches all the items, so it stops there.

Reproduction Link

          <infinite-loading
            v-if="showInfinite"
            force-use-infinite-wrapper=".__xd"
            @infinite="handleInfiniteLoader"
          >
            <div slot="no-more"></div>
            <div slot="no-results"></div>
          </infinite-loading>

The handler:

    async handleInfiniteLoader($state: {
     loaded: () => any;
     complete: () => any;
   }) {
     const results = await this.load();
     console.log("results", results);
     if (results.length > 0) {
       $state.loaded();
     } else {
       $state.complete();
     }
   },

BTW it loads 25 items at first, to avoid triggering infinite loader right after the first load. Meaning I'm filling the whole page with items; then only scrolling down should trigger the handler.

Also, what I tried - I thought the infinite loader is visible at first screen paint and that's why it's recursively triggering the handler. So I tried to load some items on component mounted and wrap infinite-loader inside v-if statement, only to make infinite-loader being rendered after the page is filled with 25 results (meaning infinite loader would render for the first time at the very end of the page, being not visible in the viewport).

Steps to reproduce

I cannot make a demo to reproduce the issue today and I think the description I gave is fair enough. I will try to make a demo tomorrow if needed.

What is Expected?

The infinite handler should be fired when scrolling actually makes infinite-loading component be visible in the viewport.

What is actually happening?

The infinite handler is triggered recursively until all the data is fetched, even without doing any "scroll" at all.

Version

3.0.0-alpha.0-0

Vue.js version

3.2

Reproduction Link

You can check the issue here - https://stackblitz.com/edit/vue-ckn2zu?file=src%2FApp.vue

Steps to reproduce

1. load the stackblitz page and see the app once it runs. initially it will load the 1st component data, and you can see 2nd component loading icon. once the second component show 'no data available' then first component also affecting.

What is Expected?

Each infinite loading component should run separately with its own set of data.

What is actually happening?

if one component doesn't have the data then other component also showing 'no data available ' error.

i install this package, everything is work now but if data respone from server contain something like a image or file, it seem to be load again and again like my image highlight bellow, correct the pic is load just one anyone can help with this issue? thanks!

I'm making a messaging app like whatsapp, I used infinite loading to load a conversation messages, when selecting a conversation it's supposed to view from the last message and scroll up to view more, to do this I used

<div class="d-flex flex-column-reverse">
  <!-- load the messages -->
</div>

this makes the scroll start from the bottom if I put the infinite-loading component after the messages it keeps loading even without scrolling if I put it at the top before the messages it will appear at the bottom and will also keeps loading if I make a parent div and put the infinite-loading before the messages div as a sibling and put direction=top it works fine, but when selecting a conversation, the scroll bar starts from the top making the component load once, while it's supposed to start from the bottom and not load messages till I scroll up.