[微信小程序]列表頁下滑刷新機制

小程序列表頁下滑刷新機制

在調用API時，要注意一點，如果要渲染一個列表的話，如果直接返回所有項，既浪費時間又浪費資源，因爲作爲使用者來說，可能並不需要得到所有的列表項，可能在第一頁或者前幾頁就拿到自己想要的，所以，後臺一般會將數據按頁面分組，前端在調用時傳入頁面值，即返回當前頁面列表項，並在下滑頁面時繼續加載下面的頁面，大大增加了效率，如何做到在下滑頁面時動態加載餘下的頁面，要用到onReachBottom()這個函數

示例：

  data = {
    List: '',
    page_index: 1
  }

  onShow() {
    Api.listTips({
        page_index: this.page_index
        //向後臺傳入頁面索引值，後臺返回相應頁面列表
      })
      .then(res => {
        if (res.data.length > 0) {
        //判斷是否還有數據傳入
          var result = res.data;
          var List = this.List;
          if (List.length == 0) {
            List = result;
            //第一次獲取數據
          } else {
            List = List.concat(result);
            //將後面獲取的數據與之前的數據進行合併
          }
          this.page_index = this.page_index + 1;
          //將頁面索引+1
          this.List = List;
          //數據綁定
          this.$apply();
        }
      })
  }

  onReachBottom() {
    this.onShow();
  }

以上函數的原理是每次執行onShow()函數時，在調用API後將page_index+1，在下滑觸底的時運行onReachBottom()函數，重新執行onShow()函數渲染頁面，在onShow()函數裏面繼續調用API，這時候傳入的數據已經下一頁的索引值，最後當沒有數據再傳過來時，終止調用API。