How does WeChat Mini Programs achieve this different drop-down refresh?

my layout implementation here is handwritten tab navigation (all, essence line). The drop-down refresh provided by WeChat Mini Programs must pull the entire Page page, which will pull down the navigation bar, so it uses the scrolltoupper event of < scroll-view >

but this event has some disadvantages:

does not have that bouncing effect
when you hit the top or bottom, it will not be triggered. You must never pull the distance to 0 when you never reach the top or low end.
users are easy to mistakenly touch, resulting in refresh. On the contrary, standard pull-up refresh and drop-down refresh cannot be mistakenly touched, and must be slipped by gesture

do you have any good practical experiences to share?

WeChat-Mini-Programs front-end html5 javascript html

Apr.03,2021

if it were me. Will hand-write a copy of the drop-down refresh.
the page structure may look like this

<tabbar></tabbar>
<scroll-view>
    <view class="top"></view>
    <view></view>
</scroll-view>

The idea of

might be like this.
first use transform to set the top height to 0
to listen for scroll-view 's touch event, and then drag down when you drag to the top. Then calculate the drag distance, increase the height of the top, no longer increase when you reach a certain height, and release the update
Note that the distance calculation here should give the effect of a spring. That is, the greater the drag distance, the smaller the increase in the height of the top. Well, to write a simple example, the height of the
top may be as follows: H1
the drag distance is: x (, which is the difference between the y left side of the touchmove and the last touchmove)
assuming that the final height of the top is 100
, then:
H1 + = (100-H1) * x / 100);
H1 = H1 > 100? 100: H1;
then there will be a simple spring effect. When the height of H1 reaches 100, it no longer increases, when released, H1 resets back to 0, and the list is refreshed

for reference only

recommend this article: https://blog.csdn.net/weixin_., which can achieve the effect that the landlord wants, but there will be Bug under iOS.

recently also made a cnode Mini Program, the interface is really like yours, custom drop-down refresh effect has been implemented, Android iOS should support, you can refer to the git address: https://github.com/wittDe/conde-wechat-mp

Previous: Conditional expression ${(aa== "222" | | bb== "333") & & cc== "444"} in activiti5.22

Next: How does hexo load plug-ins?