微信小程序scoll-view自定义下拉刷新和上拉加载

最近上手开发一个小程序，很久没做小程序了，很多都忘了，话不多说，进入正题。 需求是需要下拉刷新和上拉加载，但是这又不是页面级的下拉刷新和上拉加载（可用官方api），考虑用小程序原生scroll-view标签来做。 官文文档api描述如下：

不会有人觉得直接用就完事了吧？好的，官方bug描述来了：

用下拉刷新api是不行的，于是各种百度找到了如下的方法（亲测可用）：

wxml：

这里是通过官方api做的，bindtouchstart和bindtouchend 以及refresher-triggered控制下拉状态(这个貌似不需要)。

js：

无脑复制

handlePullStart(e) {
   let self = this;
   let touch_down = e.touches[0].clientY;
   this.data.touch_down = touch_down;
   // 获取 scroll-wrap 的高度和当前的 scrollTop 位置
   wx.createSelectorQuery().select('#client_sv').fields({
       scrollOffset: true,
       size: true
   }, function (rect) {
       self.setData({
           start_scroll: rect.scrollTop
       })
   }).exec();
},
handlePullEnd(e) {
    let current_y = e.changedTouches[0].clientY;
    let { start_scroll, touch_down } = this.data;
    if (current_y > touch_down && current_y - touch_down > 50 && start_scroll == 0) {
        // 下拉刷新 的请求和逻辑处理等
        this.getClientList(); // 请求列表数据方法
    }
},

效果如图：

这里布局挺有趣的，上面通讯录管理旁边是有个tab的，这次需求先不做，下面又有个小的tab，再下面是列表，我用的是flex布局，分3个盒子，用flex-direction: column;垂直布局，这样的话滚动的时候就只有下面的scroll-view部分滚动了。

嗯，到这就完事了，挺简单的，可以自测一下然后摸鱼了。