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>

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