How to load data by sliding in vue mobile UI framework

This article mainly introduces the sliding loading method of vue mobile UI framework. Now I will share it with you and give you a reference.

Preface

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 The width is fixed, and the excess part can be scrolled; the text area should automatically grow with the content and height; the loading chrysanthemum is displayed when the scroll distance is the default value at the bottom; after all data is loaded, the data loading completion text is displayed:

javascript

Interaction logic analysis:

1. Page initialization At this time, obtain the entire component node and the text container node

2. Bind the scroll event to the entire container node

3. Judge during the scrolling process of the container Whether the distance from the top is less than the specified value, if it is less than the custom event loadmore

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

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

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

Chrysanthemum uses a gif picture, please take a photo of your favorite chrysanthemum gif and put it in The path of the chrysanthemum component

is written at the end

Finally, here is an appendix of a usage example. :

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Using vue2 to implement shopping cart and address selection functions

Angular development practice server-side rendering

vue Sample code to implement select all and none

The above is the detailed content of How to load data by sliding in vue mobile UI framework. For more information, please follow other related articles on the PHP Chinese website!