小程序 滚动加载分页处理【亲测有效】

找了好多篇文章，有些看不懂的，有些看的似懂非懂的，很正常，别人写的终究不如自己理解写的，其实我们要的只是理解这个逻辑就可以了。

上图验证：

后端：是用的 thinkPHP5 框架（PHP）

我理解的原理：

1、初次加载数据为第一页的 onLoad:function(){} ；

2、每次拉到底部就相当于加载下一页 onReachBottom: function () {} ；

3、当加载到最后一页时，请给一个提醒 wx.showModel() ；

js（注意看注释哈，理解了，怎么实现怎么来，谁也管不着）:

const app = getApp()
var page = 1  //初始化页数
Page({
  data: {
    lists: [],
    lastpage:0,
  },
  // 生命周期函数--监听页面加载
  onLoad:function(){
    let that = this;
   //数据 初始化调用
    that.loadData(0); 
  },

  //数据加载
  loadData:function(page){
    let that = this;
    //显示 加载中的提示
    wx.showLoading({
      title: '数据加载中...',
    })
    //获取上次加载的数据
    var oldlists = this.data.lists;
    //获取数据
    wx.request({
      url: 'https://localhoat/data', //接口地址 填你的数据接口
      method: "post",
      data: {'page': page},
      success: function (res) {
        console.log(res) //查看数据结构
        var newlists = oldlists.concat(res.data) //合并数据 res.data 你的数组数据
        setTimeout(() => {
          that.setData({
            lists: newlists,
            lastpage: res.data.last_page //你的总页数
          });
        //隐藏 加载中的提示
          wx.hideLoading();
        }, 1500)
      },
    })
  },
  //加载更多
  onReachBottom: function () {
    page++
    if(this.data.lastpage > page){
      this.loadData(page); 
    }else{
      wx.showModal({
        title: '到底了',
        content: '请休息一会再看呗！',
      })
    }
  },
})

wxml（像这样的大家应该都可以随手捏来的，数据结构根据自己需要的来填，别填鸭式的填{{item.title}}、{{item.content}这两个:

<block wx:for="{{lists}}" wx:key="index" wx:for-item="item">
  <view class='lists' data-obj={{item}} data-index='{{index}}'>
     <view class='title'>{{item.title}}</view>
     <view class='content'>{{item.content}}</view>
  </view>
</block>

wxss 样式嘛，怎么喜欢怎么来，适合自己的，才是最美的！

参考：

小程序滑动屏幕加载数据 - 简书

小程序 全屏滑动【亲测有效】_随风潜入夜，不白头-CSDN博客