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

发布时间：2020-12-14 19:14:42 所属栏目：资源来源：网络整理

导读：小程序做得多了，有些常用功能就有必要记录一下请看详解：微信小程序之下拉触底时加载下一页 wxml参考： 1 2 3 4 5 6 7 8 9 10 11 scroll-view ? class='dataContainer' scroll-y bindscrolltolower="nextDataPage" ? ?????? block ? wx:for="{{userList}}

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

请看详解：

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

wxml参考：

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

??????block?wx:for="{{userList}}" wx:key="index">

????????????text>这是一条数据：{{item.data}}</>
block>

???????
class='bottomline' wx:if="{{userList.length > 0}}" >{{isLastPage?"没有更多数据了":"加载中..."}}</view>

class='bottomline' wx:if="{{userList.length == 0}}" >暂时没有数据</>
?
?
>

js参考：

复制代码

data: {
    page:1,rows:20,isLastPage:false,isLoadInterface: //查询数据列表
  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,255);">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
          })
        }
      })  


  },0);"> 加载下一页数据
  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);

      }
    }

  },0);">/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    var that = this;

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

  }

复制代码

思路：以小程序标签scroll-view作为列表容器，容器方法bindscrolltolower来触发下一页加载

　　? ?页面onload后执行第一页，非第一页的数据用concat方法拼接之前的数据

　　　防止接口未执行完反复触发bindscrolltolower里的方法，用一个变量isLoadInterface来截断

　　　接口的数据中应有islast这类是否最后一页的参数，用来判断是否加载全部数据

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!