requirement: data about 10 w, one-time loaded into the front show DOM rendering slower than a, so now consider implementing paging display, because users are using habit, don't like to click on the page to page, we need to implement the scroll bar to the bottom page to the next page, scroll to the top page to the previous page,


using the framework of the project: Vue


Trying to solve the:

1, the use of the Table Element UI components and paging components to implement data paging display page,

2, the use of infinite Element UI - scroll components, to simulate the dynamic load, but later gave up, reason:

A) he can only to the dynamic load (the actual is to monitor whether the scoll exactly)

B) when the scollbar after bottoming out, and finally a data I haven't operate it, to turn the page,,,,,, if the ` return false ` let its pages, not actively listening scoll scroll event is failure!!!!!! Must under the rolling up and then scroll down to trigger events,,, can only give up,,

(c) has been loaded data above the scroll bar) has not been released, as turning down a long time, more and more data loading DOM rendering, pages are getting slower and slower


3, abandon the use of infinite Element UI - scroll components, instead of their monitoring scoll scroll event

A) is to monitor whether the scoll exactly the same, after what we push in the Table component to display a List of data for an empty data, scoll will automatically back to the last one at this time, according to the following an empty data has not been display effect (reached), when the pulley rolling again, event trigger page to the next page, part seems to solve the problem,

B) from the beginning of the page 2, need to flip up, and we also try to in the front of the Table component to display a List of data push out a data inside, just to avoid scoll is automatically page


:

The practice of the above approach is very distorted, don't want to submit as formal code, after all, is to push the article 1 empty data, is influential to other places, is still unknown, such as operation column checkbox selection, etc.,


for help:

Dear great god projects, have this kind of abnormal requirements? If there is how to do?

I think the main problem now is to avoid scoll auto flip problem of bottom and top, and after the top or bottom pulley scroll event can no longer be monitored, these two questions!

CodePudding user response:

Handwritten virtual rolling his custom to go

CodePudding user response:

Stabilization method, onscroll rolling distance at a time

CodePudding user response:

Set a flag flog=false
Listening at the bottom of the scroll bar to, timer 0.5 s delay the flog=true
When the flog=true and scroll at the bottom and the mouse scroll down loading the next page,
Scroll to the bottom for the first time, is, won't immediately turn pages, rolling will flip again, if the first scroll, rolling up again, don't want to direct flip down again, when rolling up, let the flog=false

Replace the reference