This is the second day of my participation in the August More text Challenge. For details, see:August is more challenging

First of all, make fun of the micro channel small program documents, is really enough to cheat people. Scrolling through the ScrollView document page, after setting refresher-enabled to true, an obvious configuration property, there is no way to find a document that writes custom animation content (instead of the default three dots). Then I googled, clicked through the previous articles, and found that there was no custom implementation of animation either. (Some implementations are their own touch event to implement, need to write a large section of JS logic code)

At the end of the very inadvertently, through the document below the sample code to find custom animation content writing, good guy!!

Go straight to the code: WXML

<scroll-view scroll-y style="width: 100%; height: 100vh;" Refresher-enabled ="{{true}}" refresher-threshold="{{80}}" refresher-default-style="none" // Key set attribute, <view slot="refresher" > bindreFresherRefresh ="play" refresher-background="lightgreen" Class ="refresh-container"> </view> </scroll-view>Copy the code

Note that slot=”refresher” above!

Now that you know how to write custom content, it’s easy. However, there are still some points to be noted, as follows:

Cannot embed canvas tag

I tried to put a Lottie animation in the drop down content, but after inserting the Canvas tag, I found that the page could not display, and the console did not report an error. I wrote some simple code to draw a rectangle and found that it could not display, but once I put the canvas on the page, it could display normally, so the conclusion is: It is not possible to embed a Canvas tag inside a custom drop-down display. An alternative can be implemented using GIF diagrams. The following effect is to use the GIF diagram to achieve (Lottie official website random material to achieve, the effect is not so delicate) :

Animation performance can be improved with WXS

In the official sample code (the effect is as follows: background color opacity gradient, relatively complex effect of font gradually larger)Using WXS, which runs on the Webview layer, can reduce the communication between the view layer and the logical layer, improve the performance of the page, so as to achieve a smoother pull-down effect. For details, please go to:WXS responds to events