小程序如何上拉加载获取分页数据

在小程序端分页之前先看下后端分页的sql：

前言：这里介绍MySql和Oracle的分页SQL
1.MySql分页

select * from stu limit m, n; 
  //m = (startPage-1)*pageSize,n = pageSize

2.oracle分页

select * from (
select rownum rn,a.* from table_name a where rownum <= x
//结束行，x = startPage*pageSize
)
where rn >= y; //起始行，y = (startPage-1)*pageSize+1

现在开始编写小程序端的代码：

1.首先，在json文件里配置如下(开启上拉加载)：

"enablePullDownRefresh": true

2.js内容如下

Page({
    data(){
        listData:'',
        pageNumber: 1,//第N页
        pageSize: 15,//显示N行
        isMore: true, //是否有更多数据
    },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
          this.onReachBottom(1)
      },
    
    /**
    * 页面上拉触底事件的处理函数
    */
    onReachBottom: function (e) {
        if (1 == e) { this.setData({ pageNumber: 1 }) }//判断是否首次进入，如果是则从第1页开始
        var that = this;
        if (this.data.isMore) {//如果存在更多则执行
          var dataListTem = that.data.listData //定义一个数组使其等于data里定义的接收列表的数组
          var dataJson = {"offset": that.data.pageNumber, "pageSize": that.data.pageSize}//接口分页参数
          wx.request({
            url: '第三方服务器URL',
            data: { data: JSON.stringify(dataJson) },
            header: {
              'content-type': 'application/x-www-form-urlencoded', // 数据转换成 query string
            },
            method: 'POST',
            success: function (res) {
              console.log('请求到的数据---', res.data.data);
              if (res.data.data.length != 0) {//如果请求到的数据长度不为0则执行
                if (that.data.pageNumber == 1) {//当页数为1时，使上面定义的数组为空
                  dataListTem = []
                }
                var dataList = res.data.data //再定义一个数组使其等于后台返回的数组
                var news = distinct(dataListTem, dataList)//数组合并
                //如果后台返回的数组长度小于我每页要取的数据的长度，说明已经是最后一页了。
                if (dataList.length < that.data.pageSize) {
                  that.setData({
                    listData: news,
                    isMore: false,//是否还有更多数据：没有
                  })
                }else {
                  that.setData({
                    listData: news,
                    isMore: true,//是否还有更多数据：有
                    pageNumber: that.data.pageNumber + 1//页数加1
                  })
                }
              } else {//请求到的数据长度为0则表示无更多数据
                that.setData({
                  isMore: false
                })
              }
              function distinct(a, b) {//利用set特性去除重复值并且合并
                return Array.from(new Set([...a, ...b]))
              }
            },
            complete: function (s) {
              if (s.statusCode != 200) {
                wx.showToast({
                  title: '请求失败：' + s.statusCode + '',
                  icon: 'none'
                })
              }
            }
          })
    
      } else {
        console.log('没有更多数据')
      }
    },
})

3.wxml内容如下

<view wx:for="{{listData}}" wx:key="i">
    <view>{{item.xxx}}</view>
    ....
</view>

<view class="weui-loadmore" wx:if="{{isMore}}">
 <view class="weui-loading"></view>
 <view class="weui-loadmore__tips">正在加载</view>
 </view>
<view class="juxy-logo" wx:elif="{{!isMore}}" style="width:100%;text-align:center"><text>没有更多了！</text></view>

4.wxss内容如下

  .weui-loadmore {
    width: 65%;
    margin: 1.5em auto;
    line-height: 1.6em;
    font-size: 14px;
    text-align: center;
  }
  .weui-loading {
    margin: 0 5px;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    -webkit-animation: weuiLoading 1s steps(12, end) infinite;
    animation: weuiLoading 1s steps(12, end) infinite;
    background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
    background-size: 100%;
  }
  .weui-loadmore__tips {
    display: inline-block;
    vertical-align: middle;
  }
  .juxy-logo {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 50rpx 0 10rpx;
  }
  
  .juxy-logo image {
      width: 150rpx;
      height: 40rpx;
  }
  
  .juxy-logo text {
      font-size: 22rpx;
      color: #aaa;
      margin-top: 10rpx;
  }

5.效果图：

--点击展开查看效果图