10.微信小程序之列表上拉加载(分页)

末蓝、 2022-05-03 14:28 1001阅读 0赞

某个页面，有多个列表，如100行，这时需要实现分页功能，手机端的分页一般都是滑到底部时上拉刷新。

使用scroll-view实现，其bindscrolltolower方法：滚动到底部/右边触发。当触发时发送请求获取新的数据，我写的时候获取的数据很快，我还给它加了个定时器啊哈哈哈，因为我想让showLoading加载弹窗转一转，让用户知道上拉刷新数据。因为没加的时候showLoading一闪而过，感觉体验效果不好。

最后scroll-view使用竖向滚动时，需要给`<scroll-view/>`一个固定高度（height:93%），再给page设置高度（height:100%），否则bindscrolltolower触发不了

<scroll-view wx:if="{
       {isShowList}}" class='scrollHeight' scroll-y="true" bindscrolltolower="getMore" lower-threshold='3'>
    </scroll-view>

来一段逻辑的代码

//上拉加载分页
      getMore(e){
        var that = this;
        var user = wx.getStorageSync('bizUser');
        wx.showLoading({
          title: '正在加载中',
        });
        setTimeout(function(){
          var pageindex = that.data.curPage;
          var student = that.data.student;
          if (pageindex>=1){
            ++pageindex;
          }
          wx.request({
            url: app.url + '',
            data: {
              schoolId: user.schoolId,
              pageSize: 10,
              curPage:pageindex
            },
            method: 'GET',
            success:function(res){
              if (res.data.data) {
                var studentLength = (res.data.data instanceof Array) ? res.data.data.length : 0;
                for (var i = 0; i < studentLength; i++) {
                  //判断计时付或一次性
                  if (res.data.data[i].sign_type == 2) {
                    res.data.data[i].sign_type = '一次性';
                  } else if (res.data.data[i].sign_type == 1) {
                    res.data.data[i].sign_type = '计时付';
                  } else if (res.data.data[i].sign_type == 3) {
                    res.data.data[i].sign_type = '计时付';
                  } else if (res.data.data[i].sign_type == 4) {
                    res.data.data[i].sign_type = '一次性';
                  } else if (res.data.data[i].sign_type = 5) {
                    res.data.data[i].sign_type = '一次性'
                  }
    
                  //数字变中文
                  if (res.data.data[i].learn_stage == 1) {
                    res.data.data[i].learn_stage = '一';
                  } else if (res.data.data[i].learn_stage == 2) {
                    res.data.data[i].learn_stage = '二';
                  } else if (res.data.data[i].learn_stage == 3) {
                    res.data.data[i].learn_stage = '三'
                  }
                }
    
                if (studentLength ==10) {
                  for (var j = 0; j < studentLength;j++){
                    student.push(res.data.data[j]);
                  }
                  that.setData({
                    student: student,
                    load: '上拉加载更多..',
                    curPage: pageindex
                  })
    
    
                } else if (studentLength<10){
                  for (var j = 0; j < studentLength; j++) {
                    student.push(res.data.data[j]);
                  }
                  that.setData({
                    student: student,
                    load: '已经没有更多了..',
                    curPage: pageindex
                  })
                }
              } else {
                that.setData({
                  load: '已经没有更多了'
                })
              }
            }
          })
    
          wx.hideLoading();
    
        },500)
    
      },