关于javascript:小程序自定义下拉刷新组件为应对头部有非滚动区的情况

成果动图：

小程序是有其下拉刷新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插槽替换成列表循环元素尝试。