微信小程序如何实现这种不一样的下拉刷新？

Question

我这里的布局实现是手写的tab导航（全部、精华那一行），微信小程序自带的下拉刷新必须是拉动整个Page页面，这样会把导航栏也往下拉，因此用的是<scroll-view>的scrolltoupper事件

但是这个事件有些缺点：

1. 没有那种弹动的效果
2. 当触顶或触底时，均不会触发，必须从未到顶端或低端时把距离拉到0时才触发
3. 用户容易误触，导致刷新，相反的是标准的上拉刷新和下拉刷新不可能会误触的，必须由手势滑动

请问大家有什么好的实践经验分享吗？

Answer 1

如果是我。会自己手写一个仿下拉刷新。
页面结构可能是这样

<tabbar></tabbar>
<scroll-view>
    <view class="top">释放更新</view>
    <view>列表项</view>
</scroll-view>

思路可能大概是这样的
首先使用transform将top高度设为0
监听scroll-view的touch事件，当拖动到顶部任然继续下拖。则计算拖动距离，增加top的高度，到达一定高度则不再增加，并释放更新
注意这里的距离计算应该给一个弹簧的效果。即拖动的距离越大，top的高度增加越小，嗯，写个简单的例子的话大概可能是这样
top的高度为: h1
拖动距离为: x(此为touchmove与上次touchmove的y左边之差)
假设top最后高度为100
则:
h1 += (100 - h1) * x / 100);
h1 = h1 > 100 ? 100 : h1;
然后就会有一个简单的弹簧效果。当h1的高度达到100则不再增加，当释放的时候h1重置回0，并且刷新列表

仅供参考啦

Answer 2

推荐这篇文章：https://blog.csdn.net/weixin_... ，可以实现楼主想要的效果，不过在 iOS 下会有Bug。

Answer 3

最近也做了个cnode小程序，界面和你的真的很像，自定义下拉刷新的效果有实现，安卓iOS应该都支持，可以参考下，git地址：https://github.com/wittDe/conde-wechat-mp