Comments (10)
After a lot of testing and reviewing the code for this component, I think I found out what's causing my issues.
The $state.complete
method doesn't calculate the scrollTop
like the $state.loaded
method does, which causes the component to jump to the last bit of data on the final load. In your demo, there is an unending stream of data, so the user never gets to the last request where the complete
method is called. I found this behavior because I am testing with a small amount of data. I tried to fix the problem by calling the loaded
method just before complete
, but the isVisible
function triggers a loop of loads until the target element is filled, and if there isn't enough data to fill the target element, then it keeps trying to load data. The issues that result are dependent on the API providing the data, but it isn't a viable workaround.
Is this something that needs to be fixed, or am I missing something?
from vue3-infinite-loading.
Here's my temporary fix, which proves out the issue. The first line in my infinite handler stores the target element's previous height in the local state. Just like your component does. Then, when the complete condition is met, I follow the call to the complete
method with the following code. The final transition is now smooth.
nextTick(() => {
scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight - prevHeight;
});
from vue3-infinite-loading.
I'v tried to reproduce this issue but it works just fine for me
If you can manage to provide a fully functional example, it would help a lot.
You can start from this one on StackBlitz
from vue3-infinite-loading.
I'v tried to reproduce this issue but it works just fine for me If you can manage to provide a fully functional example, it would help a lot. You can start from this one on StackBlitz
Your example doesn't accurately represent the problem because line 16 of App.vue will never be true in your app. The API is never ending, so it will always return 10. However, if you had a dataset of 38 items, then on the last request for data that line would be true and you would experience the issue I am reporting.
from vue3-infinite-loading.
Use the following App.vue in your stackblitz to replicate the issue. Notice how the final load causes a jump to the top.
<script setup>
import { ref } from 'vue';
import InfiniteLoading from 'v3-infinite-loading';
import 'v3-infinite-loading/lib/style.css';
let comments = ref([]);
let page = 0;
const load = async ($state) => {
console.log('loading more...');
page++;
try {
const response = await fetch(
'https://jsonplaceholder.typicode.com/posts?_limit=30&_page=' + page
);
const json = await response.json();
comments.value.unshift(...json);
if (json.length < 30) {
$state.complete();
} else {
$state.loaded();
}
} catch (error) {
$state.error();
}
};
</script>
<template>
<div class="top-results">
<InfiniteLoading @infinite="load" :top="true" target=".top-results" />
<div v-for="comment in comments" :key="comment.id" class="result">
<div>{{ comment.title }}</div>
<div>{{ comment.id }}</div>
</div>
</div>
</template>
<style>
.top-results {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
height: 500px;
width: 380px;
overflow-y: scroll;
margin: 0 auto;
border-radius: 10px;
padding: 10px;
}
.result {
font-weight: 300;
width: 80%;
padding: 20px;
text-align: center;
background: #eceef0;
border-radius: 10px;
}
</style>
from vue3-infinite-loading.
Oh okay, now i see the issue.
Thanks.
from vue3-infinite-loading.
Oh okay, now i see the issue. Thanks.
Do you plan to fix it?
from vue3-infinite-loading.
Any progress on this issue?
from vue3-infinite-loading.
Any updates on the issue? i got the same problem
from vue3-infinite-loading.
Same issue!!! Any update please
from vue3-infinite-loading.
Related Issues (20)
- Broken github url in demo page
- How to trigger by ref's dom node $state.complete() HOT 5
- Data not consistently being loaded to the end during scroll (using demo code from docs in Nuxt3 app) HOT 2
- Expose function to reset the state HOT 2
- Error when component already has explicitly named default slot HOT 1
- the loader doesn't load nicely only half of the circle can be seen. HOT 1
- Compiler error when running demo project from dev branch
- Add spinning wheel slot option HOT 2
- Identifier doesn't trigger reload upon data change HOT 2
- [HELP] Does it support typescript import? HOT 2
- Reset to the top when scrolling with infinite loading HOT 1
- export 'default' (imported as 'InfiniteLoading') was not found in 'v3-infinite-loading' (module has no exports) HOT 8
- Cannot read properties of null (reading 'getBoundingClientRect') HOT 3
- Identifier change triggers reload twice HOT 1
- Slot for name="complete" doesn't work HOT 4
- Potential for duplicate observers activation HOT 1
- Issues with top scroll HOT 1
- Manually trigger infinite HOT 4
- Documentation and Demo pages do not work
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue3-infinite-loading.