Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The infinite loading example it's not working #184

Closed
Dagdelo opened this issue Apr 18, 2020 · 11 comments
Closed

The infinite loading example it's not working #184

Dagdelo opened this issue Apr 18, 2020 · 11 comments
Labels

Comments

@Dagdelo
Copy link

Dagdelo commented Apr 18, 2020

After scrolling to the bottom of the page, the loading spinner never ends.

@Dagdelo Dagdelo added the bug label Apr 18, 2020
@tangbc
Copy link
Owner

tangbc commented Apr 18, 2020

I try was working well, how do you meet this problem?

@Dagdelo
Copy link
Author

Dagdelo commented Apr 18, 2020

I simple, tried to load more items on infinite scroll example...
image
I'm on the demo page.
On Chrome Version 80.0.3987.163 (Official Version) 64 bits.
On Microsoft Edge the example works pretty-well.

@tangbc
Copy link
Owner

tangbc commented Apr 18, 2020

Look at your Console. is there no log out 'at bottom'?

This example scrolls to the real bottom to start adding data, but loading-spinner div always keep in bottom. Just use bottom-threshold equals to loading div height can solve.

@Dagdelo
Copy link
Author

Dagdelo commented Apr 18, 2020

This solved! But idk why this happens only on chrome for me...

@tangbc
Copy link
Owner

tangbc commented Apr 18, 2020

Maybe not trigger reach bottom, can you console.log these three const value when problem occur?

In source code here:
https://github.com/tangbc/vue-virtual-scroll-list/blob/master/src/index.js#L182

console.log(offset, clientSize, scrollSize)

Trigger to bottom event condition is:
https://github.com/tangbc/vue-virtual-scroll-list/blob/master/src/index.js#L197

@Dagdelo
Copy link
Author

Dagdelo commented Apr 18, 2020

Well, I've cloned the repo, installed packages, and serve the examples. This is my log
localhost-1587252745892.log

@tangbc
Copy link
Owner

tangbc commented Apr 18, 2020

I mean, in Chrome's console

@Dagdelo
Copy link
Author

Dagdelo commented Apr 18, 2020

image
That file is just my console logs saved to file...

@tangbc
Copy link
Owner

tangbc commented Apr 18, 2020

By the way, these warnning maybe cause some bug:

vue.runtime.esm.js?e832:619 [Vue warn]: $attrs is readonly.
found in
---> <VirtualList>
       <InfiniteLoading> at src/views/infinite-loading/Main.vue
         <App> at src/App.vue
           <Root>
warn @ vue.runtime.esm.js?e832:619

Reason is that you have two node_modules both contains vue dependencies in package.json, just remove one and remove node_modules, then re-install all.

@tangbc
Copy link
Owner

tangbc commented Apr 18, 2020

So problem is find: 2181.60009 + 496 = 2677.60009, never equals to or more than 2678, so I have to use Math.ceil(offset) to solve the problem thoroughly, I will publish a version to fix it.

@tangbc
Copy link
Owner

tangbc commented Apr 19, 2020

Published v2.0.6

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants