小程序自定义下拉刷新组件（为应对头部有非滚动区的状况）

效果动图：

小程序是有其下拉刷新api的，然而头部或者尾部有非滚动区域的状况下，是应对不了的，相关问题在微信开放社区已是老生常谈了，好比：

onPullDownRefresh 下拉刷新在安卓手机上会带动头部fixed元素一块儿下拉的问题

又好比：

小程序下拉刷新onPullDownRefresh 问题，fixed定位下移！

像这种问题有不少，不一一列举了。

这个问题从2018年开始就不断有开发者像微信开放社区反馈，一直到如今，都没有解决，没办法，本公司项目中有头部是固定非滚动的列表页面，只得本身自定义一个。

列表页的上拉加载，参考了这篇文章中的方法，连接放在这里，你们能够移步去看一下：

浅谈微信小程序中的下拉刷新和上拉加载

回到主题，下拉刷新，个人思路是在这篇文章里找到的：

小程序开发踩坑记录（五）——模拟实现底部tabbar和下拉刷新功能（解决安卓端打开下拉刷新功能后fixed元素失效问题）

我一上来打算用该文章中的方法，来自制下拉刷新，但是我是在自定义组件中使用，不是在page中定义，在自定义组件中scroll-view的onscroll事件怎么也响应不了，也就没法得到当前页面的scrollTop。

后来我受这个启发，既然能够在tocuh事件中改变scroll-view的scrollTop,来模拟出一个下拉刷新区域的scrollTop随手指滑动而变化，进而实现其下拉显示和回弹，那我也能够使用绝对定位和相对定位，依靠改变容器的top值来实现这个功能，也就是能够将滚动容器的top初始值设置为负的刷新区域的高度，在tocuhstart和tocuhmove事件中获取手指在屏幕上的滑动距离，让容器的top和滑动距离呈正相关，当top值达到本身设置的阈值的时候中止变化，随后在tocuhend事件中发起刷新请求。

大致思路如上图所示

下面贴一下基本代码：

<view
  class="scroll"
  scroll-y
  style="min-height: {{pageHeight + 'px'}}; top: {{marginTop + 'rpx'}}"
  enable-back-to-top="{{true}}"
  bindtouchmove="movePull" 
  bindtouchstart="startPull" 
  bindtouchend="endPull"
  bindscroll="onScroll" >
  <view class="scroll__content {{springbacking ? 'return__content' : ''}}" style="min-height: {{contentHeight + 'px'}};top: {{scrollTop + 'px'}}">
    <view class="refresh__wrap">
      <view class="refresh__center">
        <view class="refresh__icon {{refreshText === '松开刷新' ? 'rotate' : ''}}" >
          <mp-icon icon="sending" color="#999" size="{{35}}"></mp-icon>
        </view>
        <view class="tips">{{refreshText}}</view>
        <view class="times">最后更新：{{refreshTime}}</view>
      </view>
    </view>
    <slot />
    <view class="footer__line" wx:if="{{recycleList.length}}">
      <view class="scroll__loading" wx:if="{{bottomLoadingShow}}"></view>
      <text class="text {{bottomLoadingShow ? 'notline' : ''}}">{{lineText}}</text>
    </view>
  </view>
  <no-data 
    show="{{notDataShow}}"
    bind:refresh="refresh" />
</view>

重点说下，这个组件结构为外层.scroll元素，最小高度设置为pageHeight（计算方法后面会贴），position为relative，其top值设置为父级页面传入的marginTop值，就是父级页面头部非滚动元素的rpx高度，若是没有非滚动元素，则默认为0，这样的话，外层的位置就能够依赖marginTop值来肯定了，滚动的时候不会把非滚动区域也算进去；
内层列表滚动区域.scroll__content元素，position为absolute最小高度contentHeight，top值scrollTop，初始-80px（刷新文案元素高度），这样就把.refresh__wrap刷新文案元素隐藏起来了。此外，设置一个默认插槽，就是列表循环内容。

pageHeight和contentHeight计算方法，用到wx.getSystemInfozhege api,比较简单：

getPageHeight() {
      const self = this;
      wx.getSystemInfo({
        success: (res) => {
          self.setData({
            pageHeight: res.windowHeight - (self.data.marginTop / 750 * res.windowWidth),
            contentHeight: (res.windowHeight - (self.data.marginTop / 750 * res.windowWidth)) + REFRESHHEIGHT + 2,
          })
        }
      })
    }

以上，marginTop是父级组件传进来的头部非滚动区域的rpx高度值（头部非滚动区域position设置为fixed），默认为0，REFRESHHEIGHT是80，就是刷新文案区域的高度px值，最后加2是保证在第一页铺不满整屏的状况下，能让onReachBottom上拉事件生效，上拉加载本文很少说了，能够直接去看上面贴出的连接：“浅谈微信小程序中的下拉刷新和上拉加载”（注意，我这里是自定义组件，onReachBottom事件一样要在父页面中写onReachBottom生命周期，来调用自定义组件中的onReachBottom方法）。

tocuhstart方法，就是获取手指开始接触屏幕的clentY值：

startPull(ev) {
  this.lastTop = ev.changedTouches[0].clientY;
},

tocuhmove方法：

// MAX_MOVE_TOP 为 120 容许最大滑动距离
// MAX_SCROLL_TOP 为 20 容许.scroll__content的最大top值
movePull(ev) {
      this.nowY = ev.changedTouches[0].clientY;// 手指当前触摸位置的clentY值
      this.nowY = this.nowY - this.lastTop;// 滑动距离
      const query = wx.createSelectorQuery();
      query.select('.scroll').boundingClientRect();
      query.selectViewport().scrollOffset();
      query.exec((rect) => { // 必须是滚动高度为0即在顶部的时候触发
        if (rect[1].scrollTop <= 0 && this.nowY > 0 && this.nowY <= MAX_MOVE_TOP && this.data.recycleList.length) {
          this.setData({// 知足以上条件的，则使.scroll__content元素的top值等于-80px 加上滑动距离 nowY
            scrollTop: -REFRESHHEIGHT + this.nowY,
          })
          if(this.nowY >= 100) {
            this.setData({
              refreshText: '松开刷新',
            })
          }
        }
      })

      if(this.nowY > MAX_MOVE_TOP && this.data.scrollTop < MAX_SCROLL_TOP) {
        this.setData({// 此处判断是为了解决手指滑动过快，tocuhmove获得的clentY值呈非线性变化，致使滑动距离可能上一次仍是100之内，下一次直接就到300开外，没法知足上面的top变化条件，就卡住了。因此此时手动将.scroll__content的top值设置为20。
          refreshText: '松开刷新',
          scrollTop: MAX_SCROLL_TOP,
        })
      }
      ...
      // 上拉加载逻辑
      ...
    }

tocuhend事件：

endPull() {// 结束滑动的时候当.scroll__content的top值大于等于20，则能够执行刷新方法。
      if(this.data.scrollTop >= MAX_SCROLL_TOP) {
        wx.showNavigationBarLoading();
        this.refresh();
      }
      ...
      // 上拉加载逻辑
      ...
      if (this.data.scrollTop > -REFRESHHEIGHT) {
        this.setData({ // 这个springbacking为true的时候，.scroll__content元素的transition就是0.4s，回弹时候的动画效果。
          springbacking: true,
          scrollTop: -REFRESHHEIGHT
        })
      }
    },

好了，下拉刷新的逻辑就写完了，该下拉刷新在安卓和ios上的效果差异不是很大，因为业务须要，我是把他作成了一个组件，一些刷新方法和父页面的请求事件成功交互，失败交互，不在本文探讨范围以内，因此就略去了，想试试的朋友能够直接在页面中将slot插槽替换成列表循环元素尝试。