支付宝小程序开发上拉加载实现

写这篇文章起源于我们的产品经理提的一个需求，我们是做一个课程购买的小程序。每个课程下面有n节课。当点课的时候跳转到课程学习页面，并且查询当前课在设定分页数和分页大小（默认7）所在的列表，以及它的位置。
如图：

每节课对应一个序号。默认展示7条数据。当用户上拉的时候加载前面7条数据（即第一页），下拉加载后面一个分页7条数据。
那么加载后面一个分页数据我们可以通过小程序onReachBottom生命周期函数进行加载。
那么前面的呢。
我起初的构思是通过生命周期的onPullDownRefresh()上拉刷新的组件来实现。但是有问题，当数据是最后一条，如图

即要上拉两次才能加载完数据 就出现问题了，第一次请求的时候是可以的。但是无间隔第二次请求就没法触发onPullDownRefresh函数，原因后来看了下，是因为上拉刷新组件有一个动画效果，动画效果是在数据处理完以后才停止的。并且它那个是全局配置的，默认是配置在页面顶部的，跟需求不符。所以我索性自己写了一个上拉事件。就是通过touchStart监听初始坐标，然后touchEnd监听最后手指离开的坐标。详情见代码:

touchStart(ev){
    console.log(ev.changedTouches)
    touchYConfig["touchStartPageY"] = ev.changedTouches[0].clientY;
  },
  async touchEnd(ev){
    console.log(ev.changedTouches)
    touchYConfig["touchEndPageY"] = ev.changedTouches[0].clientY;
    if(touchYConfig["touchEndPageY"] - touchYConfig["touchStartPageY"] > 150){
       console.log('onScrollToUpper')
    //this.disabledYScroll();
    let lessonListConfig = this.data.lessonListConfigUp;
    let querySubjectId = this.data.queryCourseId;
    let lessonList = this.data.lessonList;
    lessonListConfig.currentPage--;
    if (lessonListConfig.currentPage >= 1) {
      my.showLoading({
      content: '数据刷新中...',
      delay: '0',
    });
      let params = {
        pageNum: lessonListConfig.currentPage,
        pageSize: 7,
        subjectId: querySubjectId
      }
      let result = await this.getLessonListByCourseId(params);
      let list = result.courses.list.concat(lessonList);
      const { totalPage } = this.data.lessonListConfigUp;
      this.setData({
        lessonList: list,
        lessonListConfigUp: {
          currentPage: lessonListConfig.currentPage,
          totalPage,
        }
      }, () => {
        my.hideLoading();
      })
    } else {
      this.setData({
        topNoData: true
      })
    }
  }
  },

这样就实现了一个丝滑的上拉加载数据功能。