First put a beauty of his photos, raise eyes ~ ha ha ha 😄 to prepare this wave of learning, just entered the workplace to learn things too much, did not hear, did not contact too much, I hope these share can share to just entered the workplace of the front end personnel.
demand
Today’s requirement is to do a rolling paging wireless load, VUE project, at first no thoughts later on the web to learn a wave, here to make a note of it ~
First look at the two picture effect bar (recording screen do not know how to upload, will the big guy can teach me 😫)
That’s probably what it is
The installation
The official website is github.com/ElemeFE/vue…
The sample
Seeing that there is a lot of writing about this but basically using fake data, rather than paging back end data, I will summarize a wave of 😋 with back end data
Add these three properties to the part you want to scroll!! The rolling part must be given a fixed height!! V-infinite: trigger loading more events (subject to item) infinite-scroll-disabled: whether scroll loading (subject to item) infinite-scroll-distance: how much distance to the bottom px start loading next page (self set)
Child components
The parent component
I pass the loadMore event and the BUSY attribute to the child component via props
!!!!!!!!! Focus on the interface to get data!
Here is divided into the first load and multiple loads the first load: directly obtain data, scroll open, load ing flag open second load: the first page of data splicing the second page of data, also achieved paging request data, if the data is empty, that is to the end, load ing flag closed, scroll closed
LoadMore event
Page number increment, request data once a second
conclusion
More than life, more than need 🤡😇 see you next time