微信小程序實現上拉加載（分頁加載）

• 本文將簡單介紹微信小程序如何實現上拉加載（分頁加載）
• 將要使用的api：
  1. wx.request(Object object)

主要思想是：當用戶滑倒頁面底部，或是距離頁面底部x時（x的自定義），觸發頁面的觸底監聽函數，然后調用開發者設計的觸底函數，進行相關請求。其中，請求第二頁的數據時，會對返回的數組與原有的數組合並，並把新數組發送到data中，渲染到頁面。

本文將按此后端接口進行介紹，接口如圖：

小程序端js代碼如下：

     data: {
          //消息列表數據
          noticeList: [],
          //頁碼
          pageNum:1,
      },
    
      //觸底響應函數
      onBottom(){
        var that = this;
        (this.data.pageNum)++;
        this.getNoticeList();
      },
    
      
      getListSuccess(res){
        //成功回調函數，具體需要根據業務需求設計分支結構，此處省略
      	if (this.data.pageNum == 1) {
      		this.setData({
        		noticeList: res.data.data.list,
         	})
        } else {
        	//獲取原始列表
            let noticeList = that.data.noticeList;
            //獲取新列表
            let arr = res.data.list;
            //新列表數據與原列表數據合並
            let newArr = noticeList.concat(arr);
            this.setData({
                noticeList: newArr,
            })
        }
      },
      //獲取列表失敗的回調函數
      getListFail(err){
        wx.showToast({
          title: '獲取失敗，請稍后重試',
          icon:'none',
          duration:2500,
        })
      },
    
      getNoticeList(){
        //請求的接口地址
        let url = '/notice/getList';
        //當前的頁碼
        let pageNo = this.data.pageNum;
        //某些業務數據，如
        let id = this.data.id;
        //一頁包含幾條數據
        let pageSize = 20;
        let data = {
          id: id,
          pageNo: pageNo,
          pageSize: pageSize,
        }
        //調用了一個自己封裝了的wx.request函數，無需關注，其參數和wx.request的差不多對應
        //url是請求地址，'post'是請求頭，data是請求參數
        //this.getListSuccess和this.getListFail分別是成功和失敗的回調函數
        $.ajax(url, 'POST', data, this.getListSuccess, this.getListFail);
      },
    
      /**
       * 頁面上拉觸底事件的處理函數
       */
      onReachBottom: function () {
        this.onBottom();
      },

除此之外，我們還可以在相關頁面的json代碼中設置：

    "onReachBottomDistance":100

描述：頁面上拉觸底事件觸發時距頁面底部距離，單位為px。

歡迎大家多多指教，一起交流~