微信小程序下拉加载下一页

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

请看详解：

微信小程序之下拉触底时加载下一页

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这类是否最后一页的参数，用来判断是否加载全部数据

 

转载于:https://www.cnblogs.com/nanyang520/p/11199719.html