Vue-based drop-down refresh & scrolling Refresh Instructions

The

Mini-series has been thinking about how to implement automatic updating of the list when the Mobile list page is displayed, and for most native apps or Web apps, add "load more" to the bottom of the list The button is also to solve the problem of an interactive way, of course, such an interaction is actually OK, but according to the user's operating habits, it seems to scroll to refresh more data and drop-down refresh the current data operation, more in line with the user's list of paging data reading habits, so in this small series want to simply say, This time in the small series system used in the drop-down refresh and rolling refresh implementation way!

In fact, this implementation of data loading principle is very simple

in the scrolling refresh, you need to scroll to the bottom of the list when the corresponding callback function, fire loading more data
in the drop-down refresh, By determining the offset of the user's finger when the list is left, triggering the corresponding callback function to fire the data refresh

Of course, here, why drop-down list is to trigger the data refresh, when the list scrolling to the bottom of the load more data, This is not only an interactive optimization, but also a custom of user habits, the general user in the scrolling list, the hope is to see more data; When the user tries to see the new state of the loaded data, the user will be inclined to refresh the list, either in the native app or the web The app is very similar.

Of course, these are just different implementations of JS lazy loading technology.

So, let's take a look at the effect after the implementation, which is also a small part of the current mobile products to do the product


First, we first look at the list of scrolling refresh, then how exactly to determine the list has been scrolled to the bottom?
Let's look at a diagram and see some basic concepts:


Here are just a few examples of the interface height and width elements we use, where:
clientheight
The height of the content viewable area, This means that the page browser can see the height of this area of the content, but be aware that padding is counted as

Offsetheight
In IE6,IE7,IE8 and the latest FF, Chrome, the element is offsetheight = clientheight + scrollbar + border

ScrollHeight
This property is more troublesome, because they are very poor in Firefox and IE.
Under the Firefox also very good understanding, it is actually the scroll bar scrollable part also to add border height also to add the horizontal scroll bar is not available height, compared with the clientheight, multiple border height with the horizontal scroll bar is not available height.
The scrollheight in IE refers to the height of the object it contains and the height of the boder and the marging, if it contains no object or the height value of the object is not set, then its value will be 15

Well, here, we will find that when ScrollTop + offsetheight >= scrollheight, in fact, our scroll bar has reached the bottom , then the rolling refresh trigger logic is out, then, Here are a few ways to get different height elements

The method of each height element has, next, we need to have a method to check whether the page denomination scroll bar has reached the bottom, then, is actually the calculation logic to execute this formula


Well, the LOADDOWNFN here is our rolling Refresh method, which is also passed to the component by instruction, which is also mentioned in the next step.

Now that there is a way to check the scroll bar scrolling position, how can we motivate this method to execute when the user scrolls the list, then we need to trigger the execution of the check method when the list is scrolled, in fact this is the listener that binds to the scroll event of the list.

So, here, throttle is a speed limiter that prevents the scrollbar from sliding to the bottom, firing the refresh function multiple times.

So our rolling refresh is finished, in fact, look back, after all, JS implementation of the code will have some callback methods in the inside, affecting our usual linear thinking, but we can find that the idea is still very clear, then, we look at the next pull refresh is how to achieve.


In fact, the trigger logic of the pull-up refresh is also very simple, plainly, is in the user finger touch screen, capture the list of the div's height coordinates, when the user's finger off the screen and then capture the list of the div's height coordinates, Make a difference to determine whether the user's action is to hold the DIV's pull action (note: Not a scrolling action OH), so as to determine if the data refresh method should be fired.

That's where we capture the user's touchscreen operation and need to take advantage of the H5 touch event, where we turn to the textbook to see what the H5 touch event refers to?

Touch events are triggered when the user's finger is placed on top of the screen, when it slides on the screen, or when it is removed from the screen, including the following events:
(ON) Touchstart:Trigger when the touch starts
(ON) Touchmove:Trigger when the finger slides on the screen
(ON) Touchend:Trigger at end of touch
(ON) Touchcancel:Triggered when the system cancels the touch event. such as telephone access or pop-up information. Generally used in the game: when playing, suddenly came to the phone, triggered Touchcancel event pause game, archive and other operations.

So, here, the small series mainly uses the Touchstart,touchmove and touchend three events, respectively, to capture the user's touchscreen behavior:







In the Touchmove, we must note thatBecause of the webview, there's a black-bottom problem ., so when we pull the list, there is the problem of exposing the black bottom of the top, sowe need to call the Preventdefault methodTo prevent the event from bubbling up, preventing the user from appearing black at the top of the list while dragging it, which can affect the experience.

So what we need to do next is bind these touch events to the scroll bar:


So, the main logic of our pull-down refresh is done.

here, of course, we also need to provide a flexible way to dynamically bind and unbind pull-down refreshes and scrolling refresh methods





Finally, because our controls have no way of knowing that our data has been loaded, we need to provide a way for the component to be notified after the external data refresh method call finishes, the data has been loaded, and the style at the drop-down or bottom is re-rendered:


We also recommend that the method be called in the Nextclick of Vue in the component:


In this way, a basic drop-down refresh and scrolling refresh instructions are implemented


The above content, the great God will inevitably have to abandon, after all, is only a brief discussion of the author of the project in the development of a little bit of technology and the author himself a little bit of accumulation, what problems also please the Great God guidance, after all, the author is still a child, the child's mailbox or the mailbox:
[Email protected]


Finally frankly, want to write a lot of things, want to study a lot of things, want to say that there are a lot of crap, hey, but after all, I will continue to learn silently, silently update the blog, although the road is not good to go, but still have to go!

Vue-based drop-down refresh & scrolling Refresh Instructions