search

PeachScript / vue-infinite-loading

An infinite scroll plugin for Vue.js.
https://peachscript.github.io/vue-infinite-loading/
MIT License
2.66k stars 366 forks source link

Manual trigger #303

Open kilkujadek opened 3 years ago

kilkujadek commented 3 years ago

First of all, thanks for great plugin!

I'm using it with containers which have various height. Occasionally they are much longer than window height and I would allow to navigate to top of container with keyboard shortcut. But there is nothing loaded yet. this.$refs.infiniteLoading.attemptLoad(); doesn't seems to work if article is long.

Is there any other way to manually force loading more?

nVitius commented 3 years ago

Calling attemptLoad won't work because it checks if the distance from the top of the component to the bottom of the scroll container is less than the minimum (https://github.com/PeachScript/vue-infinite-loading/blob/master/src/components/InfiniteLoading.vue#L262).

The existing API doesn't expose a way to do this, but you can force the functionality like this:

this.$refs.infiniteLoading.status = 1
this.$refs.infiniteLoading.$emit('infinite', this.$refs.infiniteLoading.stateChanger)

If you think this would be a valuable feature, it looks like it would be a simple change to make a PR for.

lonelypx commented 2 years ago

Calling attemptLoad won't work because it checks if the distance from the top of the component to the bottom of the scroll container is less than the minimum (https://github.com/PeachScript/vue-infinite-loading/blob/master/src/components/InfiniteLoading.vue#L262).

The existing API doesn't expose a way to do this, but you can force the functionality like this:

this.$refs.infiniteLoading.status = 1
this.$refs.infiniteLoading.$emit('infinite', this.$refs.infiniteLoading.stateChanger)

If you think this would be a valuable feature, it looks like it would be a simple change to make a PR for.

This works but the infinite loading stops after 2 or 3 loadings. i fixed the issue by only using the following code

this.$refs.infiniteLoading.$emit("$InfiniteLoading:reset", { target: this.$refs.infiniteLoading, });