How does the UI framework of vue implement sliding loading of data?

There is also a very commonly used component on our mobile terminal, which is sliding to load more components. Usually we see many plug-ins that are quite complicated to implement and think that this component is difficult, but it is not! ! This component can actually be implemented very easily, and the experience can be very great (of course we did not implement the pull-down refresh function)! ! Let's implement this component together.

Effect display

First, a gif picture shows the effect after we make it, as follows:

DOM structure

The page should contain three parts: 1. Text area 2. Load the chrysanthemum and record text 3. Load all data Completed text:

 

  
 
 
  

   
   {{loadingText}}
  
 
 
  
{{complateText}}
 

css style

The container r-scroll of the entire component should be of fixed width, The excess part can be scrolled; the text area should automatically grow in height along with the content; the loading chrysanthemum will be displayed when the scroll distance reaches the default value at the bottom; after all data is loaded, the data loading completion text will be displayed:

javascript

Interactive logic analysis:

1. When the page is initialized, get the entire component node And the text container node

2. Bind the scroll event to the entire container node

3. During the scrolling process of the container, determine whether the distance from the top is less than the specified value , if it is less than, trigger the custom event loadmore

4. Listen to the loadmore event in the business code, and if triggered, load the data

Because the code is not complicated, Therefore, I will not analyze it in detail. Please take a look at the code comments. If you are unclear, please leave a comment in the comments:

In addition, the loading chrysanthemum component is referenced in this component. Appendix is ​​a small chrysanthemum component code. Because the code is simple, I will not analyze it in detail:

Chrysanthemum uses a gif image. Please take a gif of your favorite chrysanthemum and place it under the path of the chrysanthemum component

Write it at the end

Finally, here is an appendix of a usage example:

Related recommendations:

js implements scrolling mouse to load data

jquery dataTable background loading data and paging

vue.js table pagination ajax asynchronous loading of data

The above is the detailed content of How does the UI framework of vue implement sliding loading of data?. For more information, please follow other related articles on the PHP Chinese website!