I can’t say it’s the best one, but it feels like a pull-down refresh extension for extreme performance and experience. As usual, the code snippet is last

The principle of

In fact, the principle is very simple, and ordinary H5 and some on the market pull refresh is not particularly big difference, are based on touch gesture detection events to achieve pull refresh. The current touch point is recorded when touchStart, the moving direction and moving distance are calculated when touchmove, and the pull-down refresh operation is calculated when touchend. As shown in the figure:

Implementation method

Some implementation methods are investigated. At present, most of them are calculated by JS, and then setData is used to change the transform value of elements to achieve drop-down refresh. For performance reasons, the reactive capabilities of WXS are used here to implement the entire computational logic, rendering directly in the view layer instead of communicating through the logic layer and the view layer. For details, see WXS Response Events.

Here in the list component (composed of scroll view) extracted an scroll. WXS as a response to the event handler function set, source code is basically in the scroll. WXS and list components.

Scroll. WXS defines the following variables and functions:

Var moveStartPosition = 0 var moveDistance = 0 var moveRefreshDistance = 60 var moveMaxDistance Var isRefreshMaxDown =falseVar loading = =false// Whether loading... . Module. Exports = {touchStart: touchStart, touchMove / / fingers began to touch events: touchMove, / / finger move touchEnd events: TouchEnd, / / finger leave the screen event loadingTypeChange: loadingTypeChange, / / request change of state monitor, monitor refresh request start and finish triggerRefresh: TriggerRefresh // Actively triggers a refresh, such as clicking a button on the page to refresh the list, which requires this method}Copy the code

  • Not to mention touchStart and touchMove, the code comments are clear, and the normal listening movement and processing logic.

  • The touchEnd function determines whether the movement distance reaches the threshold, and based on the result, calls the callMethod of the listening instance to trigger the refreshStart or refreshCancel methods, both of which are written to the list component to trigger or cancel the refresh method.

  • The loadingTypeChange method basically listens for the refresh to complete in order to trigger the animation effect.

  • TriggerRefresh is handled by listening for actively triggered variables. To trigger a refresh, call the forceRefresh method inside the list component, as shown in the index/index/js onLoad function: this.selectComponent(‘.list’).forcerefresh ()

  • WXS also has an unexported method called drawTransitionY. This method is due to ios12’s poor support for transition animation, so I wrote a linear Y-axis animation. Bosses can add various ease-in-out effects on their own.

Inside the specific implementation can see the code comment oh ~

use

Ok, the above mentioned implementation principle and method, so in the code, how should directly use? The following code looks like this:

<! -- Example --> <list class="list" refresh-loading="{{refreshLoading}}" loading="{{loading}}" bindrefresh="initList" bindloadmore="loadmore"> <! -- your code --> </list>Copy the code

  • The refresh-loading property is used to control the start and end of the refresh animation through the external loading state, because whenever the value of refresh-loading is changed, the change is synchronized to the showRefresh property in the component. WXS processes the animation logic by listening on the showRefresh property.

  • The loading property is a display of loading state triggered when more loading is pulled up. It has nothing to do with refreshing

  • Bindrefresh is the function that is bound when the refresh is triggered, which is triggered when the drop-down refresh animation starts successfully

  • Bindloadmore Specifies more methods to transparently load the Scroll view

Of course, the source code also includes a list-item component, which is not too relevant to this article, is used to do the waterfall long list content too much memory problem solution, see the solution to solve the small program rendering complex long list, memory problem

Dry goods

And finally, the code snippet, the small program snippet

Making the address