微信小程序下拉加載下一頁

小程序做得多了，有些常用功能就有必要記錄一下

請看詳解：

微信小程序之下拉觸底時加載下一頁

wxml參考：

      <scroll-view class='dataContainer' scroll-y bindscrolltolower="nextDataPage">

            <block wx:for="{{userList}}" wx:key="index"> 
                  <text>這是一條數據：{{item.data}}</text>
            </block>
            
            <view class='bottomline' wx:if="{{userList.length > 0}}" >{{isLastPage?"沒有更多數據了":"加載中..."}}</view>
            <view class='bottomline' wx:if="{{userList.length == 0}}" >暫時沒有數據</view>


      </scroll-view>

 

js參考：

data: {
    page:1,
    rows:20,
    isLastPage:false,
    isLoadInterface: false,
    userList:[]
  },
  //查詢數據列表
  searchDataList:function(pageNum){
      let that = this;
      let pageIndex = pageNum;
      util.ajax({
        url: '接口地址',
        method: "POST",
        data: {
          "page": pageIndex,
          "rows":that.data.rows
        },
        success: function (res) {

          that.setData({
            isLastPage:res.data.islast,
            page: pageIndex,
            isLoadInterface: false
          })
          
          if(res.data.list != undefined){
            if (pageIndex > 1){
              var listBefore = that.data.userList;
              var currentList = res.data.list;
              that.setData({
                userList:listBefore.concat(currentList)
              })
            }else{
              that.setData({
                userList: res.data.list
              })
            }
          }

        }, complete(e) {
          that.setData({
            isShowLoadPage: false
          })
        }
      })  


  },
  // 加載下一頁數據
  nextDataPage: function () {
    let that = this;

    let islastVar = that.data.isLastPage;

    if (!that.data.isLoadInterface) {
      if (!islastVar) {
        //防止在接口未執行完再次調用接口
        that.setData({
          isLoadInterface: true
        })

        let page = that.data.page * 1 + 1;

        that.searchDataList(page);

      }
    }

  },
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {

    var that = this;

    
    let page = that.data.page;
    that.searchDataList(page);

  }

思路：以小程序標簽scroll-view作為列表容器，容器方法bindscrolltolower來觸發下一頁加載

　　   頁面onload后執行第一頁，非第一頁的數據用concat方法拼接之前的數據

　　　防止接口未執行完反復觸發bindscrolltolower里的方法，用一個變量isLoadInterface來截斷

　　　接口的數據中應有islast這類是否最后一頁的參數，用來判斷是否加載全部數據