寫這篇文章起源於我們的產品經理提的一個需求，我們是做一個課程購買的小程序。每個課程下面有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
      })
    }
  }
  },

這樣就實現了一個絲滑的上拉加載數據功能。